Jerky CSSでのクロム変換の切り替え

Question

私はホバーで拡大するために背景画像にCSS3変換を使用しています。

私はOpera、Safari、Firefoxの最新のブラウザでテストし、うまく動作しますが、Chromeでは非常に不自然です。

Heresはソーシャルアイコンの上にカーソルを置いて、私が何を意味するのかを確認します。http://www.media-flare.com/pins/ - ブラウザをモバイルビューにリサイズすると気づきました。

私はここでjsfiddleバージョンを実行しており、見た目は変わりますが、移行が遅くなりました。

http://jsfiddle.net/wsgfz/1/ - これはクロムとファイヤーフォックスではぎこちなく、サファリやオペラではスムーズです。

移行をスムーズにするためにできることはありますか？ここで

あなたは

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

Answer 1

変換は、Chromeの遷移よりも優れて動作するようには思え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を見ることができない場合は、コードです。イン/アウト1匹の素早いマウスは今も消えてしなければならないちらつき効果

.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: -moz-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>

：これを試してみてください。

Answer 2

根本的な問題

アニメーションはゆっくりと動作し、不均一に見えるが、それは単に常に存在しているブラウザの限界を露出させています。

ブラウザには、アニメーションをレンダリングするための専用のスレッドがありません。アニメーションは、UIイベントのような他のブラウザアクティビティと競合する必要があります。そして時々ブラウザはコンピュータ上で動作する他のソフトウェアと競合している。さらに、ブラウザで利用可能なハードウェアアクセラレーションは、いくらか制限されている可能性があります。

イージングアニメーションは、アニメーションの開始および/または終了時にさらに遅く実行されるため、アニメーションの自然なムラがさらに目立ちます。

ソリューション

それほど明白であることからムラを防止するための最も簡単な解決策は、アニメーションの速度を増加させ、そして必要に応じて除去または緩和の使用を少なくすることです。最初と最後でかなり減速しないタイプのイージングを使用することは可能かもしれません。

今後、WebGLのハードウェアアクセラレーション（3DコンテキストでのHTML5キャンバスタグ）を使用することで、問題を軽減することもできます。ハードウェアアクセラレーションがブラウザとデバイスでより一般的になり、よりよくサポートされるようになると、古いFlashアニメーションと同じようにスムーズに動作する複雑なアニメーションを作成することが可能になります。

Answer 3

更新今、自分のスレッド ....

CSS-にCSSやJSのアニメーションをレンダリング@Mattコフリンのポストに応答して、2017

、ネイティブにアニメーションをサポートするブラウザ、ネイティブにサポートされているWebアニメーションは、通常、「コンポジタント」と呼ばれるスレッドで処理されます。これは、スタイリング、レイアウト、ペイント、JavaScriptが実行されるブラウザの「メインスレッド」とは異なります。これは、ブラウザがメインスレッド上で高価なタスクを実行している場合、これらのアニメーションは中断されずに継続することができることを意味します。

https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance

この開発者ドキュメントはまた、あなたが、あなたはレイアウトや塗料をトリガプロパティをアニメーション化することは避けてくださいすることができます@ user1467267 ...

から現在受け入れ答えをサポートしています。現代のブラウザでは、アニメーションをの不透明度または変換に制限することを意味します。どちらもブラウザが高度に最適化できます。 JavaScriptやCSSでアニメーションを処理するかどうかは関係ありません。

このドキュメントでは、アニメーション化するプロパティにwill-changeプロパティの使用を実装して、ブラウザがこれらのプロパティの追加の最適化を実行できることも示しています。私の個人的な経験では、これは不透明度と変換のためにクロムで目立つように見えます。

element{ 
    will-change: transform, opacity; 
}