CSS3 transform 在webkit内核浏览器下的锯齿问题

前两天一个同事作业面时,碰到一个锯齿问题。他使用了一个css的transform方法,把一张图旋转了4度,-webkit-transform: rotate(-4deg);-moz-transform: rotate(-4deg);,结果在Firefox里很正常,但是在Chrome和Safari边缘都有严重的锯齿。 后来在StackOverflow上找到了答案。原来webkit内核的浏览器的CSS变换普遍有这个问题,只有在OSX下的新版本的Chrome里已经修复了。现在的解决办法是通过使用css的3D变换来启用GPU加速,通过GPU渲染的变换是进行了防锯齿处理的,效果好很多。具体方法就是在transform属性里加一句translateZ(0)。看看对比图吧: 还有一个问题,感觉经过GPU渲染出来的页面,整个页面都有影响,字体比没经过GPU渲染的页面要淡和细一些。不知道这有什么说法吧。 您可以在这个页面试试,删除translateZ(0)能看到“HTML render with/without CSS 3D”这段字的显示效果有明显变化。 也截两张图放这里对比一下: 参考: http://stackoverflow.com/questions/5078186/webkit-transform-rotate-pixelated-images-in-chrome http://stackoverflow.com/questions/6846953/wonky-text-anti-aliasing-when-rotating-with-webkit-transform-in-chrome

Continue Reading

End of content

No more pages to load