部分安卓浏览器的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);
}