相关疑难解决方法(0)

我在背景图像上使用CSS3变换来悬停.

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

Heres是链接,将鼠标悬停在社交图标上以查看我的意思.. http://www.media-flare.com/pins/ - 我注意到当您将浏览器调整为移动视图时,它会变得更糟.

我在这里做了一个jsfiddle版本,并且因为很难看到它而放慢了转换速度.

http://jsfiddle.net/wsgfz/1/ - 这在chrome和firefox中看起来很生涩,在safari和opera中很流畅.

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

如果你不能查看jsfiddle,这是代码

HTML

.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 …