那些遇到过的问题

为什么我的CSS3动画在谷歌浏览器中不流畅(但在其他浏览器上非常流畅)？

Cod*_*000 50 html css animation google-chrome css3

我的环境(我在哪里获得LAG):

Mac OSX El Capitan 10.11.2 on Chrome Version 50.0.2661.102(64-bit)

CODEPEN:

http://codepen.io/vieron/pen/hnEev

动画:

在此输入图像描述

情况:

我搜索了很多,没有发现任何适合我的东西.我知道以前曾问过这个问题.

当我使用Safari和Firefox打开网站时,我的Mac上的CSS3动画很流畅,但不是Chrome!

奇怪的是,原始的CodePen在Chrome上很流畅.

问题:

我的代码中的某些内容导致动画仅在Chrome上出现波动.它是什么,我该如何解决？

我看到了什么:

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

码:

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>
Run Code Online (Sandbox Code Playgroud)

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%;
}
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

重要说明:

我只添加了CodePen:

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

.marquee ul li a img {
    max-height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

删除它并不能解决问题.

编辑1:

Google Chrome Profiler(选项1):

在此输入图像描述

Google Chrome Profiler(选项2(快照)):

在此输入图像描述

编辑2:

Chrome中的CSS3过渡并不顺畅

我似乎刚刚在动画中发现了一个奇怪的行为.每当我离开视线并通过滚动重新开始时,它"增长"(变大).

这种行为似乎是上述问题的答案中描述的内容.但是指定一个像建议的固定宽度并没有解决滞后问题.

编辑3:

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

在此输入图像描述

编辑4:

这很奇怪.在评论并取消注释某些行之后(基本上回到有滞后的代码时),动画性能变得更好.不像Safari或Firefox那样流畅,但仍然更流畅.

编辑5:

我找到了"罪魁祸首".

我在我的网站标题中使用另一个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
Run Code Online (Sandbox Code Playgroud)

删除它会使另一个动画变得平滑.

但是:

这并不能解释为什么Firefox和Safari中的所有内容都很流畅,但Chrome中没有.

Chrome功能不强吗？

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

如果有人可以从Google/Chrome上获得答案,我会奖励他/她.

更新6:

试过Opera浏览器.完全一样的滞后!现在我们知道BLINK渲染引擎存在问题!

o.v*_*.v. 7

Chrome在渲染时支持硬件加速,从而提高了css3动画的性能.您可以触发硬件加速应用translateZ(0),rotateZ(360deg)或者Chrome浏览器的技巧把它相似.

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

backface-visibility: hidden;
perspective: 1000;
Run Code Online (Sandbox Code Playgroud)

这也有助于解决GPU集成和/或受限制时的一些问题(想想省电模式),并且性能下降.这可以解释macbook上的视差性能问题!¯\ _(ツ)_ /¯

  • 对我来说没有改变任何东西..但是动画在 Safari 中超级流畅:| (2认同)

Sai*_*hir 5

为了使动画更好，您可以使用will-changeCSS 的属性。此属性向浏览器提示该元素将要更改。

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

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

Cod*_*000 2

我找到了“罪魁祸首”。

我在网站标题中使用另一个 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
Run Code Online (Sandbox Code Playgroud)

删除它会使其他动画变得流畅。

尽管如此：

这并不能解释为什么在 Firefox 和 Safari 中一切都很顺利，但在 Chrome 中却不然。

Chrome 的功能比较弱吗？

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

如果有人可以从 Google / Chrome 得到答案，我将奖励他/她。

更新6：

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

归档时间：

查看次数：

18640 次

最近记录：

7 年，5 月 前
Chrome CSS 3转换不顺利 4
更多相关链接
相关归档
在引导程序中使列固定位置 71
'position:absolute'与flexbox有冲突吗？ 61
如何通过JavaScript更改FontSize？ 39
如何将CSS应用于特定类的直接子级 36
将抽屉图标动画到setDisplayHomeAsUpEnabled上的箭头？ 19
HTML电子邮件中的感叹号 18
如何在换行时更改弹性顺序 13
浏览器意图并返回正确的活动(关闭打开的选项卡) 12
手机不想从 Android 浏览器拍照 8
Apple Watch动画在1.0.1之后破裂 6
难疑归档
如何将Git存储库还原为以前的提交 7278
如何在JavaScript中验证电子邮件地址？ 4099
让现有的Git分支跟踪一个远程分支？ 3437
如何使用jQuery刷新页面？ 2361
如何获得$(this)选择器的子节点？ 2182
如何调试Node.js应用程序？ 1531
何时使用struct？ 1347
Git diff对付藏匿处 1265
活动已泄露最初添加的窗口 1117
功能编程是否取代了GoF设计模式？ 1028