为什么我的CSS3animation不能在Google Chrome浏览器中stream畅播放(但在其他浏览器上却很stream畅)?

我的环境(我在哪里得到延迟):

Chrome上的Mac OSX El Capitan 10.11.2版本50.0.2661.102(64位)

CODEPEN:


animation:

在这里输入图像说明


情况:

我search了很多,没有find任何适合我的东西。 我知道这个问题之前已经被问过了。

当我使用Safari和Firefox打开网站时,我的Mac上的CSS3animation非常stream畅,但Chrome浏览器不支持!

奇怪的是,原来的CodePen在Chrome上很stream畅。


问题:

我的代码中的某些内容导致animation只在Chrome上出现波涛汹涌。 这是什么,我该如何解决?


我看到了什么:

  • Chrome CSS 3转换不顺畅

我需要我的定位是相对适应不同的屏幕尺寸。


码:

HTML

<div class="marquee"> <ul> <li> <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> </li> <li> <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> </li> <li> <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> </li> </ul> </div> 

CSS

 * { margin: 0; padding: 0; } @-webkit-keyframes loop { 0% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 100% { -moz-transform: translateX(-66.6%); -ms-transform: translateX(-66.6%); -webkit-transform: translateX(-66.6%); transform: translateX(-66.6%); } } @-moz-keyframes loop { 0% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 100% { -moz-transform: translateX(-66.6%); -ms-transform: translateX(-66.6%); -webkit-transform: translateX(-66.6%); transform: translateX(-66.6%); } } @-ms-keyframes loop { 0% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 100% { -moz-transform: translateX(-66.6%); -ms-transform: translateX(-66.6%); -webkit-transform: translateX(-66.6%); transform: translateX(-66.6%); } } @keyframes loop { 0% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 100% { -moz-transform: translateX(-66.6%); -ms-transform: translateX(-66.6%); -webkit-transform: translateX(-66.6%); transform: translateX(-66.6%); } } .cssanimations .marquee { position: relative; width: 90%; margin: auto; overflow: hidden; } .cssanimations .marquee > ul { list-style: none; position: relative; z-index: 1; top: 0; left: 0; width: 300% !important; height: 80px; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-animation: loop 20s linear infinite; -moz-animation: loop 20s linear infinite; -o-animation: loop 20s linear infinite; animation: loop 20s linear infinite; } .cssanimations .marquee > ul > li { white-space: normal; position: relative; text-align: justify; text-justify: distribute-all-lines; line-height: 0; letter-spacing: -0.31em; float: left; width: 33.333333%; overflow: hidden; height: 80px; } .cssanimations .marquee > ul > li:before { content: ''; position: relative; height: 100%; width: 0; } .cssanimations .marquee > ul > li:before, .cssanimations .marquee > ul > li > * { vertical-align: middle; display: inline-block; } .cssanimations .marquee > ul > li:after { content: '.'; display: inline-block; height: 0 !important; width: 100%; overflow: hidden !important; visibility: hidden; font-size: 0; word-spacing: 100%; } .cssanimations .marquee > ul > li > * { display: inline-block; vertical-align: middle; text-align: left; line-height: 1; letter-spacing: 0; } .cssanimations .marquee > ul > li img { margin: 0 1.6%; } .marquee ul li a{ display: inline-block; height: 80%; } .marquee ul li a img { max-height: 100%; } 

JS中的链接在HTML中

 <script src="Vendors/js/modernizr.js" type="text/javascript"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 

重要提示:

只有我添加到CodePen的东西:

 .marquee ul li a{ display: inline-block; height: 80%; } .marquee ul li a img { max-height: 100%; } 

删除这并不能解决问题。


编辑1:

Google Chrome Profiler(选项1):

在这里输入图像说明

Google Chrome浏览器分析器(选项2(快照)):

在这里输入图像说明

编辑2:

Chrome中的CSS3转换不顺畅

我似乎刚刚在我的animation中发现了一个奇怪的行为。 每次通过滚动移动到视线之外,它都会“增长”(变大)。

这种行为似乎是上述问题的答案中所描述的。 但是,如指定一个固定的宽度build议并没有解决滞后。

编辑3:

Google时间轴(移除gravity.js后):

在这里输入图像说明

编辑4:

这很奇怪 在评论和注释了一些行后(基本上回到代码出现滞后时),animationperformance变得更好。 不像Safari或Firefox那样stream畅,但仍然stream畅。

编辑5:

我find了“罪魁祸首”。

我在我的网站标题中使用另一个codepen:

 <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> #stars #stars2 #stars3 #title %span PURE CSS %br %span PARALLAX PIXEL STARS 

删除它使其他animation平滑。


但是:

这并不能解释为什么在Firefox和Safari浏览器中一切都很顺利,而不是在Chrome浏览器中。

Chromefunction不强吗?

我向Chrome提交了一份报告,希望他们能在这里回答,但不能保证。

如果有人可以从Google / Chrome上得到答案,我就奖励他/她的赏金。


更新6:

试图在Opera浏览器。 完全一样的滞后! 现在我们知道这是BLINK渲染引擎的问题!

解:

使用@media进行绝对定位以适应不同的屏幕尺寸。


说明:

它适用于所有其他浏览器,而不是Chrome,所以无论你做什么,都将专门针对Chrome。

这给你3个选项:

  • (1)让Google修复Chrome或

  • (2)使用可与Chrome或

  • (3)接受Chrome将不会顺畅。


TL; DR:

你知道绝对定位会起作用。

Chrome在渲染时支持硬件加速,改善css3animation的性能。 你可以通过应用translateZ(0)rotateZ(360deg)或者类似的方法触发硬件加速 。

一旦你通过应用上述技巧来使用硬件加速(或者如果你已经在使用它,但是引用的代码示例是不完整的和/或第三方库已经为你处理的话) ,你可以进一步提高性能根据需要应用前缀:

 backface-visibility: hidden; perspective: 1000; 

这也有助于解决GPU集成和/或节stream(考虑省电模式)时的一些问题,并降低其性能。 这将解释macbook上的视差性能的问题! ¯\ _(ツ)_ /¯

我find了“罪魁祸首”。

我在我的网站标题中使用另一个codepen:

https://codepen.io/saransh/pen/BKJun

 <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> #stars #stars2 #stars3 #title %span PURE CSS %br %span PARALLAX PIXEL STARS 

删除它使其他animation平滑。


但是:

这并不能解释为什么在Firefox和Safari浏览器中一切都很顺利,而不是在Chrome浏览器中。

Chromefunction不强吗?

我向Chrome提交了一份报告,希望他们能在这里回答,但不能保证。

如果有人可以从Google / Chrome上得到答案,我就奖励他/她的赏金。

更新6:

试图在Opera浏览器。 完全一样的滞后! 现在我们知道这是BLINK渲染引擎的问题!

为了使animation更好,你可以使用CSS的will-change属性。 这个属性提示浏览器该元素将会改变。

https://developer.mozilla.org/en/docs/Web/CSS/will-change

你可以在这里阅读更多关于will-change

Interesting Posts