Question

我在使用Safari 7的网站上遇到问题（在OSX上）网站地址是：
＆lt;编辑：地址不再有效。对不起＆GT;

如果单击垂直新闻稿按钮，则会在内容框的右边缘弹出一个叠加层。

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

叠加内容是一个固定宽度的绝对定位框。它包含一个带有类“bg”的div，它是一个将CSS位置设置为fixed并且CSS top，right，left left设置为0的div。

所需（通常获得的）效果是，此bg框的大小最大为视口的宽度和高度。在safari中，它的行为就好像它的位置设置为“绝对” - 它的大小只是容器div的宽度和高度。

这是Safari的已知问题吗？是否存在错误？更新？

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

Answer 1

我不确定该定位的内容是什么，但这是我在浏览器中获得相同结果的方法：

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

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

Answer 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引用。

此外，您也可以在其他浏览器中尝试

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

2 个答案: