transform带来的文字模糊问题

在写一个side project的时候,碰到了一个浏览器渲染问题,在写一个放大动画的时候,我使用了css3的transform来改变scale。在chrome上发生了渲染的问题,在放大的时候出现了模糊问题,文字完全不 能看。

先使用程序员的技能去搜一波,大概原理就是scale的时候导致了font-size算出了小数,所以chrome就模糊了处理,而且只会发生在复杂的dom结构里,很简单的dom结构,是不会发生模糊的。因为chrome在处理这种复杂dom结构的缩放的时候,把dom结构渲染成了一张图,然后对图片进行缩放。

终极解决方案:
对原有的dom结构,先进行zoom,慢慢调试到scale之后文字不模糊的程度就ok了

Leave a Comment

电子邮件地址不会被公开。 必填项已用*标注