css 优化字体抖动问题

在滚动轮播展示的时候，经常遇到页面抖动现象

抖动现象截图和👇👇👇

截图卡顿现象还挺明显，可能效果不是很清楚。

其实设置css样式的几行代码即可,

页面结构：

使用了vue的vue-seamless-scroll组件，

span是每一行内容的最小容器，

只需要加上overfow:hidden属性和 backface-visibility: hidden;即可

span{
          /** 优化字体抖动问题 */
          overflow: hidden;
          -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
          -ms-backface-visibility: hidden;
          backface-visibility: hidden;
}

设置后的效果截图发👇👇👇：

emmmm,动图截的卡顿好明显，好像看不出效果，不过真的有用！Trust me !

关于 backface-visibility属性，用于隐藏被旋转的 div 元素的背面。

MDN的详细介绍链接

👉backface-visibility - CSS: Cascading Style Sheets | MDN (mozilla.org)