Safari中的CSS转换和固定定位

我对一个只在Safari中出现的网站有一些问题。我正在Mac上运行5.1.7 7534.57.2版

您可以在此处查看网站：

该网站是视差滚动，有一个相对定位的内容div，其中包含所有内容，包括3个视差滚动背景，它们都是固定的，顶部和左侧设置为0

在固定视差的背景容器中，当用户将鼠标移到彩色图像上时，彩色图像会褪色为全色图像。对于每个图像，有两个叠加的div，每个div都具有按背景位置定位的背景图像。底部的div具有彩色图像。顶部的div以全彩图像为背景，其不透明度设置为0，直到鼠标悬停。淡入淡出是通过在“不透明度”属性上使用CSS转换来实现的，以便顶部div变得可见

因此，仅在Safari中，当我将鼠标移到这些div中的任何一个上时，转换会平稳进行，但在这个过程中，相同视差滚动背景div中的所有内容都会移动/跳跃。如果删除CSS转换，则不会发生这种情况

我认为这可能与transition/webkit transition属性与Safari中的固定位置容器不匹配有关。然而，我发现的所有与之相关的问题都是从2010年开始的，并且提到了一个我认为已经修复的Safari bug……两年后。但也许不是

---

右侧导航栏第3点下方的Catalyst部分还有另一个问题。这些动画图像在Chrome、Firefox和Opera中用作链接，但在Safari中不起作用。有什么想法吗？

我有一个类似的问题，我创建的标题菜单有固定的位置和过渡时间。当访问者向下滚动时，菜单上会出现一个方框阴影，该阴影会逐渐消失。当我在MacOS的safari上看到这一点时，我会有一个奇怪的滑入问题。为了简单地解决这个问题，在花了大量时间寻找答案之后，我将消除Mac的过渡效应。这解决了滑入问题，但可悲的是消除了过渡效应

因此，正如您所推测的，这可能也是项目的过渡期。最好的办法可能是制作一个MacSafariCSS文件，去掉该特定区域的过渡时间，然后继续您的项目

---

我现在能推荐的最好的。希望有帮助。

通过添加-webkit transform:translate3d0,0,0解决了闪烁转换问题；给受影响的部门。仍然停留在第二个问题上。