最近碰到一个很奇怪的问题,就是用vue.js渲染文字的时候,有时候会发生文字错乱的情况,大致如下:

以上效果是在ios上出现的,如果你想重现,可用ios手机打开以上网页,点击change,就会出现重叠情况,电脑上打开没有此bug。

问题分析

这是一个很奇怪的bug,具体原因我还没找到,不过根据这个错乱的图,倒是发现一些可能的问题所在。

我们打开调试窗口后,发现文字的font-size:50,但是行高line-height(蓝色区块)却只有20,并且还有一个margin-top(黄色区块)为17,文字真正变的地方为蓝色区块内,也就是line-height所对应的区域。其他区域都是有残留的。

因此想要解决这个问题的办法就是将line-height设置和font-size一样,或者比它大,这样就可以保证整个区域被重新渲染。

上面是已经修复过的,可以再试试看。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字