css - Chrome 中的生涩 CSS 变换过渡

Question

我在背景图像上使用 CSS3 变换以在悬停时放大。

我已经在最新的 Opera、Safari 和 Firefox 浏览器中进行了测试，并且运行良好且流畅，但是在 Chrome 中，过渡非常不稳定。

这是链接，将鼠标悬停在社交图标上以了解我的意思... http://www.media-flare.com/pins/ - 我注意到当您将浏览器的大小调整为移动 View 时，情况会变得更糟。

我在这里做了一个 jsfiddle 版本并放慢了转换速度，因为它更难看到。

http://jsfiddle.net/wsgfz/1/ - 这在 chrome 和 firefox 中看起来很不稳定，在 safari 和 opera 中很流畅。

我能做些什么来使过渡更顺利吗？

如果你无法查看jsfiddle，这里是代码

.social {
   position: relative;
   list-style:none;
}

.social > li > a {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
   color: transparent;
}

.social > li > a {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
   color: transparent;
}

.fbook, .twit, .tmblr, .pntrst, .insta {
   background: url(http://placehold.it/350x150) center center;
   width: 78px;
   height: 90px;
   background-size: cover;
   float: left;
   margin: 30px;
   -webkit-transition: all 0.8s ease;
   -moz-transition: all 0.8s ease;
   transition: all 0.8s ease;
 }

 .fbook {background-position: 0 0}
 .twit {background-position: -78px 0}
 .tmblr {background-position: -156px 0}
 .pntrst {background-position: -232px 0}
 .insta {background-position: -310px 0}

.fbook:hover, .twit:hover, .tmblr:hover, .pntrst:hover, .insta:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transform: scale(1.5);
 }

<ul class="social">
  <li><a href="" class="fbook">Facebook</a></li>
  <li><a href="" class="twit">Twitter</a></li>
  <li><a href="" class="tmblr">Tumbler</a></li>
  <li><a href="" class="pntrst">Pinterest</a></li>
  <li><a href="" class="insta">Instagram</a></li>
  <li><a href="" class="rss">RSS</a></li>
</ul>

Answer 1

2017 年更新

作为对@Matt Coughlin 帖子的回应，原生支持动画的浏览器现在在它们自己的线程上呈现 CSS 和 JS 动画....

CSS-based animations, and Web Animations where supported natively, are typically handled on a thread known as the "compositor thread." This is different from the browser's "main thread", where styling, layout, painting, and JavaScript are executed. This means that if the browser is running some expensive tasks on the main thread, these animations can keep going without being interrupted.

https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance

此开发人员文档还支持@user1467267 当前接受的答案...

Where you can, you should avoid animating properties that trigger layout or paint. For most modern browsers, this means limiting animations to opacity or transform, both of which the browser can highly optimize; it doesn’t matter if the animation is handled by JavaScript or CSS.

该文档还建议为您要设置动画的属性实现 will-change 属性的使用，以便浏览器可以对这些属性执行额外的优化。根据我的个人经验，这似乎只在 chrome 中的不透明度和变换中才明显。

element{
  will-change: transform, opacity;
}