Question

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

这是一个显示我在说什么的jsFiddle：

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

Answer 1

我正在努力解决类似的问题。对我来说，整个页面中的随机链接变得显得大胆（显然与Safari中的OSX和抗锯齿有关，因为Chrome（在Windows 7和OSX中）以及Windows中相同版本的Safari工作正常。

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

-webkit-transform: translateZ(0);

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

您将其添加到正常状态而不是：悬停动画状态。

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

与以下相反：

img:hover { /* not here */ }

另一个非常积极的副作用是，根据你正在做的动画，它可能通过GPU更顺畅。所以你不会得到你在后续帖子中提到的不稳定动画。在我的例子中，动画在野生动物园中更加无缝。我正在进行120％的刻度和5度旋转的图像，同时出现一些盒子阴影。在我看来，它并没有减少CPU的使用率。

Answer 2

我无法开始告诉你为什么会这样做，但Safari并没有改变你的文字颜色，它在转换运动时对文本进行了不同的抗锯齿处理。文本边缘变得更平滑，文本本身变得更薄。如果您使用辅助功能工具放大小提琴，这是非常明显的。在某些较小的尺寸下，表单文本旁边的按钮周围的阴影也会发生变化。（Safari是否有可能重新绘制某些内容，或者在转换过程中将它们重新定位在子像素级别？有人解释了这一点，它现在让我疯了！）

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

根据您正在转换的内容，用javascript动画替换css转换可能会修复它例如，在你的小提琴中，问题也发生在缩放变换上，但不是类似的jQuery动画功能。

似乎有一些阴影和样式，其中抗锯齿变化不太明显（至少在小提琴中），因此您也可以尝试不同地设置占位符和其他受影响的文本。（如果你走这条路线，这个线程可能有助于设置占位符样式：Change an HTML5 input's placeholder color with CSS）

Answer 3

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

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

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

Wonky text anti-aliasing when rotating with webkit-transform in Chrome

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

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

Answer 4

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

用两个词来说：我有一些容器（弹出窗口），里面有一些元素。出现的方式如下：容器背景通过不透明度逐渐变暗，内部元素正在向上扩展（就像从后面靠近我们一样）。一切都很好用，但不适用于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 5

我有同样的问题，而过渡一些文字变得反对。这种情况只发生在相对于e定位的锚文本中，其中z-index位于定位的元素内，并且具有z-index本身。如果我删除所有位置和索引，问题就会消失。

Answer 6

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

Answer 7

对于轮换（）也许没关系，但对于 scale（）它没有使用-webkit-transform: translateZ(0);公式。< / p>

我用过：

-webkit-font-smoothing: antialiased;

将鼠标悬停在Safari中的CSS过渡中可以减轻某些字体颜色

7 个答案: