web-dev-qa-db-ja.com

GoogleでCSS3アニメーションがスムーズにならないのはなぜですかChrome（ただし、他のブラウザーでは非常にスムーズです）？

私の環境（どこで遅れるのか）：

Mac OSX El Capitan 10.11.2 on Chromeバージョン50.0.2661.102（64ビット）

CODEPEN：

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

アニメーション：

enter image description here

状況：

私は、自分に合ったものを見つけることなく、これを何度もグーグルで検索しました。私はこの質問が以前に聞かれたことを知っています。

SafariとFirefoxでWebサイトを開くと、ChromeではなくMacでCSS3アニメーションがスムーズになります。

奇妙なことに、元のCodePenはChromeでスムーズです。

問題：

コード内の何かが原因で、Chromeでのみアニメーションが途切れます。それは何ですか、どうすれば修正できますか？

私が見たもの：

さまざまな画面サイズに適応するために相対的な位置が必要です。

CODE：

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%;
}

HTMLのJSリンク

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

重要なN.B.:

CodePenに追加したもののみ：

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

.Marquee ul li a img {
    max-height: 100%;
}

これを削除しても問題は解決しません。

編集1：

Google Chromeプロファイラー（オプション1）：

enter image description here

Google Chrome Profiler（オプション2（スナップショット））：

enter image description here

編集2：

ChromeではCSS3の移行がスムーズではありません

アニメーションで奇妙な動作を見つけたようです。見えなくなってスクロールするたびに「成長」（拡大）します。

この動作は、上記の質問への回答で説明されているようです。しかし、提案されたように固定幅を指定しても、ラグは修正されませんでした。

編集3：

Google Timeline（gravity.jsを削除した後）：

enter image description here

編集4：

これは変です。いくつかの行にコメントを付けてコメントを外した後（基本的には遅延があったときのコードに戻ります）、アニメーションのパフォーマンスが向上しました。 SafariやFirefoxほどスムーズではありませんが、それでもスムーズです。

EDIT 5：

「犯人」を見つけました。

私は私のウェブサイトのヘッダーで別のコードペンを使用しています：

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

削除すると、他のアニメーションがスムーズになります。

NONETHELESS：

これは、ChromeではなくFirefoxとSafariですべてがスムーズである理由を説明していません。

Chromeより強力ではありませんか？

レポートをChromeに提出し、ここで回答することを希望していますが、保証はありません。

誰かがGoogleから回答を得ることができる場合/ Chromeこれについて、私は彼/彼女に報奨金を与えます。

UPDATE 6：

Operaブラウザで試してみました。まったく同じラグです！これで、BLINKレンダリングエンジンに問題があることがわかりました。

htmlcsscss3google-chromeanimation
50
Coder1000

「犯人」を見つけました。

私のウェブサイトのヘッダーで別のコードペンを使用しています：

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

削除すると、他のアニメーションがスムーズになります。

NONETHELESS：

これは、FirefoxとSafariですべてがスムーズで、Chromeではうまくいかない理由を説明しません。

Chrome=より強力ではない？

レポートをChromeに提出し、ここで回答することを希望していますが、保証はありません。

誰かがGoogleから回答を得ることができる場合/ Chromeこれについて、私は彼/彼女に報奨金を授与します。

UPDATE 6：

Operaブラウザで試してみました。まったく同じラグです！これで、BLINKレンダリングエンジンに問題があることがわかりました。

2
Coder1000

Chromeはレンダリング時にハードウェアアクセラレーションをサポートし、css3アニメーションのパフォーマンスを向上させます。 トリガーハードウェアアクセラレーション は、translateZ(0)、rotateZ(360deg)などを適用して、Chromeをトリックします。

上記のトリックを適用してハードウェアアクセラレーションを使用している場合 you）、必要に応じてプレフィックスを付けて適用することにより、パフォーマンスをさらに向上させることができます：

backface-visibility: hidden;
perspective: 1000;

これは、GPUが統合されている場合やスロットルされている場合（省電力モードを考えてください）、パフォーマンスが低下する場合のいくつかの問題への対処にも役立ちます。これは、Macbookでの視差パフォーマンスの問題を説明します！ ¯\ _（ツ）_ /¯

7
o.v.

解決策：

さまざまな画面サイズに対して@mediaで絶対配置を使用します。

説明：

他のすべてのブラウザで機能し、Chromeではないため、Chrome専用になります。

これにより、3つのオプションが提供されます。

  • （1）GoogleにChromeまたは

  • （2）Chromeまたは

  • （3）Chromeではスムーズではないことを受け入れます。

TL; DR：

絶対配置が機能することはご存知でしょう。

4
HenryM

アニメーションを改善するには、CSSのwill-changeプロパティを使用できます。このプロパティは、要素が変更されることをブラウザに示唆します。

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

will-changeについて詳しくはこちらをご覧ください。

1
Saiyam Gambhir