Chrome中的粗糙CSS变换过渡 [英] Jerky CSS transform transition in Chrome

问题描述

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

我已经在Opera，Safari和Firefox的最新浏览器中测试过，并且运行顺畅，但在Chrome中，转换非常不稳定。

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

我在这里做了一个jsfiddle版本，并且减慢了转换，因为很难看到。

a href =http://jsfiddle.net/wsgfz/1/> http://jsfiddle.net/wsgfz/1/ - 这似乎在Chrome和火狐，在safari和歌剧流畅。 / p>

有什么我可以做的，使过渡更平滑吗？

这里的代码，如果你不能看到jsfiddle

HTML

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

CSS

  .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）; 
} 
  

解决方案

转换似乎比Chrome中的过渡。请尝试以下操作：

  .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-transform：translate（0px，0）; -webkit-transition：-webkit-transform 0.8s ease; -moz-transform：translate（0px，0）; -moz-transition：-webkit-transform 0.8s ease; transform：translate（0px，0）; transition：-webkit-transform 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 -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>  

闪烁效果一个快速鼠标进/出应该现在走了。

I am using CSS3 transform on a background image to enlarge on hover.

I have tested in the latest browsers of Opera, Safari and Firefox and work nice and smooth, however in Chrome the transition is very jerky.

Heres is the link, hover over the social icons to see what I mean.. http://www.media-flare.com/pins/ - I have noticed as you resize the browser down to mobile view, it gets worse.

I have done a jsfiddle version here and slowed down the transition as it is harder to see.

http://jsfiddle.net/wsgfz/1/ - This seems jerky in chrome and firefox, smooth in safari and opera.

Is there anything I can do to make the transition smoother?

Here is the code if you cannot view jsfiddle

HTML

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

CSS

.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);
 }

解决方案

Transformations seem to work better than transitions in Chrome. Try this:

.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-transform: translate(0px, 0);
  -webkit-transition: -webkit-transform 0.8s ease;
  -moz-transform: translate(0px, 0);
  -moz-transition: -webkit-transform 0.8s ease;
  transform: translate(0px, 0);
  transition: -webkit-transform 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>

The flickering effect one quick mouse in/out should be gone too now.

这篇关于Chrome中的粗糙CSS变换过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！