CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了CSS3动画中的Webkit文本混叠变得奇怪大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是一个时髦的.而且我确信这是webkit相关的,因为它只是Chrome版本20.0.1132.57和Safari 5.1.7中的一个问题.我上传了一个简短的视频来解释这个问题,因为几乎不可能通过文本来解释.

视频:
http://youtu.be/0XttO-Diz2g

简短版本:
在CSS3动画中,定位元素(绝对或相对)内的文本似乎改变了它的抗锯齿.动画运行时变得更大胆.

注意:
这与缩放元素变得模糊的动画不一样. (this issue)

任何想法,解决方法等?

解决方法

更新:我的旧答案下面的作品,但只是一个黑客的方式来解决这个问题.相反,请阅读这个原因是为什么其他元素受到影响: http://jsbin.com/efirip/5/quiet.简而言之:动画元素应该放在自己的堆叠上下文中,给它一个z-index.

老回答:

它是与WebKit相关的.老实说,我不知道为什么它这样做,我认为这是一个错误.您可以通过将任何3D相关的CSS3声明添加到页面上的任何元素来防止它.例:

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

要么:

body {
    -webkit-BACkface-visibility: hidden;
}

这些声明的存在导致WebKit使用硬件加速来阻止您指出的问题.

大佬总结

以上是大佬教程为你收集整理的CSS3动画中的Webkit文本混叠变得奇怪全部内容,希望文章能够帮你解决CSS3动画中的Webkit文本混叠变得奇怪所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。