固定位置在 Windows Safari 上不起作用答案

【问题标题】：Position fixed not working on Windows Safari固定位置在 Windows Safari 上不起作用
【发布时间】：2014-04-05 17:14:16
【问题描述】：

我对位置：固定的画廊有疑问；并且网站内容正在它上面滚动。除了 Windows 7 上的 Safari（是的，它甚至在 IE8 和 Mac 上的 Safari 中也有效）之外的每个浏览器都可以使用该固定位置。

Top 已定义，但它仍充当相对位置并与其余内容一起向下滚动。

【问题讨论】：

标签： windows safari position fixed

【解决方案1】：

解决方案是在该位置定义 z-index:fixed;元素。出于某种原因，仅在 Windows Safari 位置：固定；在定义任何 z-index 之前无法使用。

后来发现这个bug可能是页面上一些固定元素的-webkit-transform属性造成的。

另外，我发现在该固定元素上设置它可能会有所帮助：

-webkit-transform: translateZ(0);

【讨论】：

【解决方案2】：

我不知道这是否会对任何人有所帮助 - 但我在 twitter bootstrap V3.2.0 中将下拉菜单与页面左侧对齐时遇到了这个问题（实际上是制作了一个填充宽度的水平子菜单页）。它似乎只在 safari（桌面和 iPhone）中失败。经过数小时的搜寻，我发现 bootstrap V3.1.0 可以正常工作并追踪到这方面的差异

.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

特别是底部的三个 translate3d 行阻止了 position:fixed 为我工作..一旦我删除了这些，一切都是金色的。

【讨论】：