html - 为什么固定定位不适用于 iOS 上的 flex？

Question

我的网站上有一个侧边栏，它隐藏在较小的屏幕上。当用户单击按钮时，它会打开。

侧边栏的内容很长，因此需要可以滚动。我使用以下方法实现了这一点:

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 700px;
  min-width: 700px;
  max-height: 100%;
  overflow-y: scroll;

我也在使用 flex，所以边栏也有这些规则:

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  display: flex;

除了在运行 iOS 9 的旧版 iOS 设备(chrome 或 safari)上查看时，侧边栏在所有浏览器中显示良好。这些问题是内容重叠 - 固定 div 的高度似乎被忽略了。

Here is a jsfiddle of the issue

如果我删除 position: fixed从演示中它在 iOS 中显示正常。或者，如果我删除 flex 设置，它也可以正常显示。它似乎是两者的结合。

我尝试过的:

• height: auto min-height: 100% max-height: 100% height: 100vh

• bottom: 0

• position: absolute//这不会滚动

如果这个问题没有CSS解决方案，检查是否正在使用ios设备并应用单独的样式表就可以了吗？

非常感谢任何建议。

完整性的 HTML:

<div id="sidebar">
  <div class="block">
   text content...
  </div>
<div class="block">
   text content...
  </div>
 ...
</div>

Answer 1

我的解决方案是使用以下方法检测 ios:

/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)

然后将侧边栏 css 更改为 display: block

这并不理想，我仍然不明白为什么 iOS 在结合 fixed 和 flex 时会出现问题...