Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

CSS3变化的图片重采样问题

  以前就遇到过这样的问题,CSS3变换后图片会卡顿一下,当时觉得问题不大,懒得研究。昨天在微博上又看到了这个问题,于是就查了一些资料,想了一些办法,解决了这个问题。解决这个问题的突破点就是图片重采样。如何防止CSS3变换后的图片重采样。
  首先是问题重现 <base href="http://www.web-tinker.com/pictures/" />
<style>
img {
  display:block;width:166px;
  margin:100px auto;
  transition:all 200ms linear;
}
img:hover {
  -webkit-transform:scale(1.2);
  -moz-transform:scale(1.2);
}
</style>
<img src="e24e65bb04418a4aeb8f1c510184f25d.gif" />
  这个问题在Firefox上特别明显,transition结束后大概几百毫秒,图片会突然变化一下。这正是因为图片为了适应新的尺寸而进行了重采样。然而最终的重载样和transition时的重采样使用了不同的算法。transition为了赶上过渡效果的变化速度而注重性能;最终的重采样会考虑抗锯齿,它比较注重画质。所以transition的结果和最终重采样的结果不同,这就造成了最后的卡顿现象。
  解决这个问题有两个思路,一种是让图片本身渲染时就使用和transition同样的算法,另一种是阻止transition结束后的重采样。第一个思路在Chrome可以实现,只要为IMG元素加上image-rendering:-webkit-optimize-contrast;样式即可。但这个属性是Chrome私有的,Firefox上无法使用。虽然Firefox也支持image-rendering但没有任何一个可用的值可以解决这个问题。因此Firefox需要使用第二种思路,阻止transition之后的重采样。可以在:hover的样式中加入个animation使引擎认为动画没有结束,这样就不会做最后的重采样了。
  下面是修复的版本 <base href="http://www.web-tinker.com/pictures/" />
<style>
img {
  display:block;width:166px;
  margin:100px auto;
  transition:all 200ms linear;
  image-rendering:-webkit-optimize-contrast; /*fix chrome*/
}
@keyframes blah {100% {color:red;}} /*fix firefox*/
img:hover {
  -webkit-transform:scale(1.2);
  -moz-transform:scale(1.2);
  animation:blah 1s; /*fix firefox*/
}
</style>
<img src="e24e65bb04418a4aeb8f1c510184f25d.gif" />
  当然这些方法并不漂亮。如果大家有更好的方法欢迎分享~
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^