我正在使用CSS转换来在CSS转换状态之间转换(基本上转换元素的比例).我注意到,当元素转换时,页面上的其余文本(在Webkit中)倾向于稍微改变其呈现,直到转换完成.
小提琴:http://jsfiddle.net/russelluresti/UeNFK/
我还注意到,我的标题上没有这种情况,标题上有-webkit-font-smoothing: antialiased属性/值对.所以,我想知道,有没有办法让文本保持默认外观(字体平滑的"自动"值),而不是在转换过程中改变渲染.
我已经尝试明确设置文本使用"自动"值,但这没有做任何事情.我还应该注意,将字体平滑设置为"无"也会阻止渲染在转换期间闪烁.
任何帮助表示赞赏.
编辑1
我应该注意到我使用的是OS X.在浏览Parallels的Chrome测试时,我没有看到两个不同的段落表现不同,所以这可能是Macs独有的问题.
所以我有一些div应用了各种效果的原生元素(border-radius,box-shadow和transform: scale()).当我为它们制作动画时,会发生两件奇怪的事情:
请参阅此处的示例:http://jsfiddle.net/trolleymusic/RHeCL/ - 底部的按钮将触发问题.
第一个问题也发生在Firefox中,所以我猜这是因为这是动画规范应该如何工作的.不是我想要的,但好吧,我会忍受它.
第二个问题很奇怪.我知道它与3d变换有关,因为如果我(仅用于测试目的)声明-webkit-perspective或-webkit-transform-style: preserve-3d;在圆形元素上,它也会导致模糊问题.我的困惑在于,我并没有尝试将z索引转换为全部,我也尝试使用纯粹的动画translateY代替translate.
它发生在Chrome(18),Chrome Canary(20)和Safari(5.1.2和5.1.4)中.
那么,我认为我的想法是正确的吗？我怎样才能避免模糊？
最坏的情况:我可以使用不同大小的元素而不是缩放它们,这不是真正的问题 - 但我认为这将是一个更优雅的解决方案,现在这个问题已经出现了.
我有一个问题,我的css3转换正在影响页面上的其他元素,甚至导致它们闪烁.我看到另一篇关于此的帖子,但他们没有解决这个问题.
http://scosha.mybigcommerce.com/w107b/当您滚动浏览导航时,您会看到动画css3转换.它在firefox中工作正常,没有闪烁但是使用chrome和safari,效果非常明显,你可以在下拉菜单项和页脚文本中看到它.