Safari 中的 CSS 过渡和固定定位

Question

我遇到了一些仅在 Safari 中出现的网站问题。我在 Mac 上运行版本 5.1.7 (7534.57.2)。

您可以在此处查看该网站：http://mcad.edu/annual-report-2011-12/。

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

在固定视差背景容器内，当用户将鼠标悬停在彩色图像上时，彩色图像会逐渐变为全彩色图像。对于每个“图像”，堆叠了两个 div，每个 div 都有由 background-position 定位的背景图像。底部的 div 具有彩色图像。顶部的 div 将全彩色图像作为背景，并将其不透明度设置为 0，直到鼠标悬停。淡入淡出是使用 opacity 属性上的 CSS 过渡来实现的，以便顶部 div 变得可见。

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

我认为这可能与 transition/webkit-transition 属性不能很好地与 Safari 中的固定位置容器配合使用有关。但是，我发现的所有与此相关的问题都来自 2010 年，并且提到了一个我认为已经修复的 Safari 错误……两年后。但也许不是。

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

Answer 1

我创建的标题菜单的固定位置和过渡持续时间也有类似的问题。当访问者向下滚动时，菜单会出现一个淡入到位的框阴影。好吧，当在 MacOS 的 safari 上查看时，我遇到了一个奇怪的问题。为了轻松解决此问题，在花费大量时间寻找答案之后，我正在删除 Mac 的过渡效果。这解决了问题的幻灯片，但遗憾地摆脱了过渡效果。

所以正如您推测的那样，这可能也是您项目的过渡期。最好的办法可能是制作一个 Mac-Safari CSS 文件，去掉该特定区域的过渡持续时间，然后继续您的项目。

我现在能建议的最好的。希望对您有所帮助。