将鼠标悬停在 Safari 中的 CSS 过渡上会使某些字体颜色变亮

Question

在我的 CSS 中，我定义了一个类的转换。由于某种原因，当我将鼠标悬停在带有过渡的类上时，transition-duration 由于某种原因会改变其他地方的字体颜色（形成占位符和某些链接）。 （据我所知，这种情况只发生在 Safari 中。）

这是一个 jsFiddle，它显示了我正在谈论的内容：

http: //jsfiddle.net/EJUhd/

有谁知道为什么会发生这种情况以及如何防止它？

Answer 1

我正在为类似的问题而苦苦挣扎。
对我来说，整个页面的随机链接明显变得粗体（显然与 OSX 和 Safari 中的抗锯齿有关，因为 Chrome（在 Windows 7 和 OSX 中）以及 Windows 中相同版本的 Safari 运行良好。

解决方案是不明显，并且根据您正在做的事情可能不是最佳的，但添加这行代码解决了问题：

-webkit-transform: translateZ(0);

这基本上会触发 GPU 执行动画，并且文本在我的网站中不再有伪影 请注意，它不是。总是适合使用它，因为它可能使用更多的电池寿命并使用更多的资源，但是有时，它使用较少，所以基本上在添加它时检查性能

而不< 。 /em> :hover 动画状态

img { -webkit-transform: translateZ(0); }

与 on: 相反，

img:hover { /* not here */ }

另一个非常积极的副作用是，根据您正在执行的动画，它可能会通过 GPU 变得更流畅，因此您不会获得您提到的断断续续的动画。在你的后续帖子中，动画更加无缝。野生动物园。我正在对图像进行 120% 缩放和 5 度旋转，同时出现一些框阴影。不幸的是，在我的情况下，它并没有减少 CPU 使用率。

Answer 2

我没有找到与我遇到的问题更相关的主题，但这与上述问题相关。所以，可能对某些人有帮助。

用两个词来说：我有一些容器（弹出窗口），里面有一些元素。
出现的方式如下：容器背景通过不透明度逐渐变暗，内部元素按比例放大（就像从后面靠近我们一样）。一切都在任何地方都运行良好，但在 Safari (Mac/Win/iPhone) 中则不然。 Safari“最初”显示了我的容器，但它以某种奇怪的方式闪烁（出现微小的短闪光）。

仅添加 -webkit-transform:translateZ(0); （到容器！！！）确实有帮助。

.container {
    -webkit-transform: translateZ(0); /* <-- this */
}

.container section {
    -webkit-transform: translateZ(0) scale(.92); /* <-- and I added translate here as well */
    -webkit-transition: -webkit-transform .4s, opacity .3s;
    opacity:0;
}

.container.active section {
    -webkit-transform:translateZ(0) scale(1);
    -webkit-transition: -webkit-transform .3s, opacity .3s;
    opacity:1;
}

---

但说到过渡，还有以下部分代码：

.container {
    ...
    top:-5000px;
    left:-5000px;
    -webkit-transition: opacity .5s, top 0s .5s, left 0s 5s, width 0s 5s, height 0s 5s;
}
.container.active {
    -webkit-transition: opacity .5s;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

考虑到，我想仅使用 css 切换来显示/隐藏弹出窗口（并且还要使其很好地消失，而不是仅使用“display:none”）。

所以，不知何故，在出现的 Safari 上（显然）继承了除了“不透明度”之外的过渡属性，即使我只用 -webkit-transition: opacity .5s; 重载了它们；

因此，添加以下内容解决了问题：

.container {
    ...
    -webkit-transition: opacity .5s, top 0s 0s, left 0s 0s, width 0s 0s, height 0s 0s;
}

Answer 3

我无法告诉你为什么要这样做，但 Safari 不会改变你的文本颜色，它会在过渡过程中以不同的方式对文本进行抗锯齿处理。文本边缘变得更平滑，文本本身也变得更细。如果您使用辅助工具放大小提琴，这一点会更加明显。在某些较小的尺寸下，表单文本旁边的按钮周围的阴影也会发生变化。 （Safari 是否有可能在过渡期间重绘某些内容，或者在子像素级别上重新调整它们的方向？请有人解释一下，它现在让我发疯！）

因为我也不知道为什么要这样做，这些可能不是最好的解决方案：

根据您要转换的内容，用 javascript 动画替换 css 转换可能会修复它。
例如，在您的小提琴中，比例转换也会出现问题，但类似的 jQuery 动画函数不会出现问题。

似乎有一些阴影和样式的抗锯齿变化不太明显（至少在小提琴中），因此您也可以尝试以不同的方式设置占位符和其他受影响文本的样式。
（如果您采用以下路线，此线程可能有助于设置占位符的样式： 使用 CSS 更改 HTML5 输入的占位符颜色 )

Answer 4

感谢上面对抗锯齿的识别，以及下面文章的帮助，我修改了代码以包含 translate3d(0,0,0) 并且问题消失了：

    -webkit-transition-duration: .17s, .17s translate3d(0,0,0);

过渡不是和以前一样顺利，但这是另一个问题的主题。

使用 webkit 旋转时出现不稳定的文本抗锯齿-在 Chrome 中进行转换

http://johanbrook.com/design/css/a-fix-for-antialiasing-issues-in-webkit-browsers/

http://www.webkit.org/blog/386/3d-transforms/

Answer 5

我遇到了同样的问题，在转换时一些文本变得抗锯齿。这种情况仅发生在锚文本中，这些锚文本相对于 e 与 z-index 定位在元素内部且与 z-index 本身一起定位。
如果我删除所有位置和索引，问题就会消失。

Answer 6

使用 transition 和 translate3d 也存在类似的问题。有时，页面上具有 :hover 样式的任何元素都会显示其悬停行为。我在使用滑块时遇到这个问题。将 -webkit-transform:translateZ(0); 放入 :hover 元素，其行为正常。

Answer 7

对于rotation()也许没问题，但是对于scale()它不起作用-webkit-transform：translateZ(0);公式。

我用过：

-webkit-font-smoothing: antialiased;