美文网首页
部分安卓浏览器的css3动画导致图片边缘跳动

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

作者: void_main | 来源:发表于2016-11-17 17:38 被阅读25次

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

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

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

    相关文章

      网友评论

          本文标题:部分安卓浏览器的css3动画导致图片边缘跳动

          本文链接:https://www.haomeiwen.com/subject/cfadpttx.html