固定定位在 Safari 7 中不起作用

Posted 2023-02-24

【中文标题】固定定位在 Safari 7 中不起作用

【英文标题】：Fixed Positioning not working in Safari 7

【发布时间】：2014-02-14 20:28:48

【问题描述】：

我在使用 Safari 7（在 OSX 上）的网站上遇到问题。 网址是：

如果你点击垂直的新闻通讯按钮，在内容框的右边缘，会弹出一个叠加层。

这个叠加层在大多数浏览器上看起来不错，但 safari 存在问题。

覆盖内容是一个固定宽度的绝对定位框。它包含一个类为“bg”的 div，它是一个 CSS 位置设置为固定且 CSS 顶部、右侧、底部左侧设置为 0 的 div。

想要的（并且通常获得的）效果是，这个 bg 框的大小可以达到视口的宽度和高度。在 safari 中，它的行为就好像它的位置设置为“绝对”一样——它的大小只是容器 div 的宽度和高度。

这是 Safari 的一个已知问题吗？是否提交了错误？有更新吗？

我可以通过重写 html、CSS 和 javascript 的一小部分来解决这个问题（如果有人有更简单的解决方案，欢迎分享！）但我想先了解发生了什么。

【参考方案1】：

我不确定那个定位是怎么回事，但这是我在浏览器中获得相同结果的方法：

#overlays .overlay   /* line 1081 */
    ...
    width: 100%;
    height:100%;
    ...


#overlays .overlay .content.text   /* line 1185 */
    ...
    margin:0 auto;
    ...

【参考方案2】：

您可以使用 Z-index，但 Z-index 与 position:fixed 不可靠，如下小提琴所示：http://jsfiddle.net/mZMkE/2/ 使用 translateZ 转换。

transform:translateZ(1px);

在您的页面元素上。

编辑：在您的代码中，添加这个 css：

.bla, .projects, .contact  
      -webkit-transform:translateZ(1px);
      -moz-transform:translateZ(1px);
      -o-transform:translateZ(1px);
      transform:translateZ(1px);

然后从这些元素和 .intro 中删除 z-index 引用。

你也可以在其他浏览器上试试

【讨论】：

我不认为这是堆叠问题，而是盒子大小的问题。