苦逼前端

图片放大抖动的内在原因及解决方法

HTML-CSS2014-09-28 14:10:38transition图片放大抖动

最近百度视频首页改版,小伙伴们给作品海报添加了一个 hover 效果,就是鼠标划入的时候,海报会放大一些,划出的时候,海报再缩小回原来的大小。具体实现也挺容易的:

a img{
    -webkit-transition: all .05s ease-in;
}
a:hover img{
    -webkit-transform: scale(1.05);
}

其他前缀的就不写了,本来效果也挺好的,但是 pm 同学发现,每次图片放大之后,该图片都会抖一下。

后来仔细对比发现,「抖」的这一下,实际上是让图片变清晰了,但是不仔细看的话,整体感觉就是:图片放大之后还要抖一下。感觉着实让人不爽。

后来发现,有一条属性可以在图片放大后,不再让图片变清晰,这样也就解决了图片的抖动问题了,该属性是:-webkit-backface-visibility: hidden;

这条属性的本意是:隐藏被旋转的元素的背面,但它为何能阻止浏览器补间像素使放大的图片变清晰,就不得而知了...

讨论(2)
  • 14.127.28.*10年前

    23333233

  • 不长肉9年8个月前

    mark

还可输入2000个字
京公网安备 11011202003202号 鲁ICP备 13027548号-1