解决Swiper中translate3d导致字体模糊

2014年4月11日0:34:17

今天公司的设计师sama跟我说,官网旧机回收首页上有个UI问题,说是用户晒单那部分的字体模糊,如下图所示:

translate3d导致字体模糊
translate3d导致字体模糊

(PS:以上原先是#666的字体颜色,为了使效果更明显于是我改成#000,原先在浏览器上比这个更模糊的画面木有截取下来= =)

嗯,这是使用了 swiper 插件,导致了文字出现了模糊。(不过在firefox、IE中倒是好的!)

于是乎我就开始找问题原因之所在咯,第一个想到是不是字号大小不一致,结果我查看了下一切都正常都是12px,特地调大还是会有模糊。

接着我想到的就是去swiper的官网上看看它的API上有木有相关的方法。

结果还真有一个:手册上有一个参数名是: useCSS3Transforms ,默认为true的,改成 false即可。

但是如果真的这么快就可以解决这个问题的话,我就用不着大费周折写这篇文章了吧……

所以结果是虽然修复了字体模糊问题,但是带来了另一个大问题.. chrome下每次滚动竟然4个一起滚了(原先每次移动1个项的)… orz ..!

于是没办法,只好在保持使用 css3 transform 的 translate3d 的情况下,继续寻找解决方案了。

在stackoverflow上,我也找到相关技术的话题讨论: http://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d

网上有说是使用:     -webkit-font-smoothing: subpixel-antialiased; 这个的

也有说使用  -webkit-perspective: 1000; 这个的…

当然结果也都是木有用……

我甚至在 github 上面swiper官方的issue中找到了相关问题: https://github.com/nolimits4web/Swiper/issues/45 但问题是作者似乎木有给出有效解决方案=-=

倒是解释了下为何使用 translate3d,说是这样可以强制浏览器使用GPU来渲染,可以大大提高页面的性能,尤其是移动端(但会在一定程度上降低质量…正如API文档中所写的)

好吧,最终,又是经由API文档中另外一个参数的启发:

 roundLengths
Set to true and Swiper will round width/height values, may be useful if you have rounding errors (like 833.48px width) in responsive swiper.

于是就想是不是因为外围容器它的 translate3d 属性有小数的原因。

然后我就去看了下,结果还真是如此! 哦也!

我发现当 translate3d 属性中只要出现小数,那么容器中的文字就会有一定程度的模糊,当该属性为 *.5 时,模糊的现象最严重。

translate3d的值出现小数时会导致文字模糊
translate3d的值出现小数时会导致文字模糊

当这个值为整数的时候就木有模糊现象了!

于是就决定更新容器宽度,使之能被4整除!

这样就解决该问题了…

translate3d的值改为整数以后文字就不模糊了
translate3d的值改为整数以后文字就不模糊了

SO,现在看起来舒服多了吧~

另外: IE11 下,在 dulplicate的slide中,用户的微博头像会错位… 这个问题有点坑。。倒是IE10等都是好的..

XuXun 清风迅来

2014年4月11日0:09:01

Leave a Reply

Your email address will not be published. Required fields are marked *

twenty − nine =