堆栈内存溢出
  繁体   English   中英

为什么我的 CSS3 animation 在 Google Chrome 中不流畅（但在其他浏览器中非常流畅）？

[英]Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?

 原文  2016-06-04 11:37:34  1   8    html/ css/ google-chrome/ animation

问题描述

我的环境（哪里有问题）：

Chrome 版本 50.0.2661.102（64 位）上的 Mac OSX El Capitan 10.11.2

密码本：

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

ANIMATION：

在此处输入图像描述

情况：

我在谷歌上搜索了很多，但没有找到对我有用的东西。 我知道以前有人问过这个问题。

当我用 Safari 和 Firefox 打开网站时，CSS3 animation 在我的 Mac 上很流畅，但在 Chrome 上却不行！

奇怪的是，原来的 CodePen 在 Chrome 上很流畅。

问题：

我的代码中的某些内容导致 animation 仅在 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>

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 Profiler（选项 2（快照））：

在此处输入图像描述

编辑 2：

CSS3 在 Chrome 中过渡不流畅

我似乎刚刚在我的 animation 中发现了一个奇怪的行为。每次我移出视线并通过滚动返回时，它都会“变大”（变大）。

这种行为似乎是上述问题的答案中所描述的。 但是像建议的那样指定固定宽度并不能解决滞后问题。

编辑 3：

谷歌时间轴（删除 gravity.js 后）：

在此处输入图像描述

编辑 4：

这很奇怪。 在注释和取消注释某些行之后（基本上回到有滞后时的代码），animation 性能变得更好。 不像 Safari 或 Firefox 那样流畅，但仍然更流畅。

编辑 5：

我找到了“罪魁祸首”。

我在我网站的 header 中使用另一个代码笔：

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 平滑。

N.NETHELESS：

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

Chrome 是不是很强大？

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

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

更新 6：

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

8 个解决方案

解决方案1
 16  2016-06-22 20:53:56

Chrome 在渲染时支持硬件加速，从而提高 css3 动画的性能。 您可以通过应用translateZ(0) 、 rotateZ(360deg)或类似的方法来触发硬件加速，从而将 Chrome 引入其中。

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

backface-visibility: hidden;
perspective: 1000;

这也有助于解决当 GPU 被集成和/或被节流（想想省电模式）以及其性能下降时的一些问题。 这将解释 Macbook 上的视差性能问题！ ¯\_(ツ)_/¯

解决方案2
 5  2016-06-22 11:07:27

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

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

您可以在此处阅读有关will-change更多信息。

解决方案3
 2  2016-06-12 12:02:02

解决方案：

对不同的屏幕尺寸使用 @media 的绝对定位。

解释：

它适用于所有其他浏览器，但不适用于 Chrome，因此无论您做什么都将专门针对 Chrome。

这为您提供了 3 个选项：

  • (1) 让 Google 修复 Chrome 或

  • (2) 使用适用于 Chrome 的解决方案或

  • (3) 接受它不会与 Chrome 一起顺利。

TL;博士：

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

解决方案4
 2 已采纳  2016-06-13 15:40:30

我找到了“罪魁祸首”。

我在我的网站标题中使用了另一个 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

删除它会使其他动画平滑。

尽管如此：

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

Chrome 的功能不是很强大吗？

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

如果有人能从谷歌/Chrome 上得到答案，我会奖励他/她。

更新 6：

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

解决方案5
 1  2020-10-01 16:15:29

我最近更新了我的 Nvidia GPU 驱动程序，Chrome 中的动画变得断断续续，即使硬件加速已打开。

对我有用的是重新激活硬件加速。

Google Chrome > Settings > Advanced > System > Use hardware acceleration when available

为了重新激活断开的链接，我关闭了硬件加速，重新启动了浏览器。 在这里，我注意到动画和以前一样不稳定。 然后我再次打开硬件加速，重新启动浏览器，硬件加​​速显然又被重新激活了，因为动画现在超级流畅。

我假设更新图形驱动程序破坏了 Chrome 与硬件加速的链接，它只需要重新激活。

解决方案6
 0  2021-01-14 05:41:48

尝试禁用您的 Chrome 扩展程序（这对我来说是个问题）

转到 Chrome\Manage Extensions 切换切换按钮以禁用它们，如果它工作正常，然后尝试一一启用，以了解究竟是哪个导致了问题。

解决方案7
 0  2022-05-18 22:25:39

我的带有 NViDIA 卡的 Linux 电脑也遇到了完全相同的问题。 在按需设置为 NVIDIA 并重新启动后，它就解决了。 奇怪的是，它再次设置为性能模式。 我猜问题出在卡设置而不是镀铬上。

解决方案8
 0  2023-01-23 15:25:15

我知道这是旧的，但如果有人仍然偶然发现这篇文章的话。

我还有一个问题，我的动画在 iOS 上的 Safari 中很流畅，但在 iOS 上的 Google Chrome 中却不稳定。

我用这些代码行修复了它：

@media screen and
  (prefers-reduced-motion: reduce), 
  (update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important; /* Hat tip Nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */
    transition-duration: 0.001ms !important;
  }
}

我从这里得到了代码。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么我的滚动不流畅？ 使用 CSS 滑动图像动画不流畅 为什么我的jQuery动画不太流畅？ 为什么CSS3动画不能在Safari和Chrome中运行？ 如何平滑CSS3动画？ 如何使CSS3动画流畅？ CSS3动画 - 平滑无限动画 CSS3动画不适用于Chrome 身体动画不流畅 CSS3 平滑动画更改背景图像
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM