部分安卓浏览器的css3动画导致图片边缘跳动

2016-11-17  本文已影响25人  void_main

最近,在项目开发中遇到了一个问题。一个页面上包含了图片轮播的动效,基于css3实现的。但是在部分安卓浏览器下,轮播图开始滚动时,会影响页面的其他图片的渲染效果,导致图片的大小会跳动并变模糊,当轮播图滚动结束时,其他图片的就恢复正常。

怀疑是浏览器的渲染功能有一定的差异。经资料查阅发现的解决方案
为页面的图片元素添加如下的样式。
大概是translate3d的属性使得浏览器打开硬件GPU加速渲染,使得轮播图css3动画在执行时,页面其他元素的渲染得以正常。具体原因有待进一步验证

img{
  -webkit-transform: scale(1) rotate(0) translate3d(0,0,0);
  transform: scale(1) rotate(0) translate3d(0,0,0);
}

上一篇下一篇

猜你喜欢

热点阅读