tva*_*nt2 20 css css3 css-transitions
在我的CSS中,我为一个类定义了一个过渡.出于某种原因,当我将鼠标悬停在具有转换的类上时,由于transition-duration某种原因会改变其他地方的字体颜色(表单占位符和某些链接).(就我所知,这只发生在Safari中.)
这是一个jsFiddle,显示我在说什么:
有谁知道为什么会这样,我怎么能阻止它？
Mau*_*cio 35
我正在努力解决类似的问题.对我来说,整个页面中的随机链接变得显得大胆(显然与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使用率.
| 归档时间： |
|
| 查看次数： |
17010 次 |
| 最近记录： |