带有位置的Div：在Safari中不在位置div中显示的绝对值

Question

我在绝对定位的div内有一个固定位置的div。在Chrome和Firefox中，显示内部div，但在OSX Safari 10中，不显示。

JSFiddle

.outer {
  margin-top: 21px;
  position: absolute;
  background: red;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  max-height: 100vh;
}

.inner {
  display: inline;
  overflow: hidden;
  position: fixed;
  background-color: blue;
  max-width: 100vw;
}

<div class="outer">
  <p>Inner Div</p>
  <div class="inner">
    <p>Outer Div</p>
  </div>
</div>

在小提琴中，将外部div的position属性更改为static或sticky意味着将显示内部div。但是这些职位不适合我的情况。

有没有一种方法可以使内部div在Safari中显示而不更改div的位置？

Answer 1

就在提交这个问题之前，我遇到了答案。不过，写完整件事后，我将其发布，以防其他一些可怜的人遇到同样的问题：

简单的解决方案是删除z-index: 1;父 div 上的规则。它在 Chrome、FireFox 或我测试过的任何移动浏览器中没有任何区别，但在 Safari 中却大不相同。

注意：以上是问题作者在问题本身中发布的答案，只需在此处复制粘贴即可，以便其他用户可以轻松看到。