Chrome'da Jerky CSS dönüşümü

Question

Vurgulu büyütmek için arka plan görüntüsünde CSS3 dönüşümü kullanıyorum.

En son Opera, Safari ve Firefox tarayıcılarında test ettim ve güzel ve pürüzsüz bir şekilde çalışıyorum, ancak Chrome'da geçiş çok sarsıcı.

Heres bağlantıdır, ne demek istediğimi görmek için sosyal simgelerin üzerine gelin. http://www.media-flare.com/pins/ - Tarayıcıyı mobil görünüme küçültürken farkettim, daha da kötüye gidiyor.

Burada bir jsfiddle sürümü yaptım ve geçişi daha da zorlaştıracağı için yavaşlattım.

http://jsfiddle.net/wsgfz/1/ - Bu krom ve firefox sarsıntılı, safari ve opera pürüzsüz görünüyor.

Geçişi daha sorunsuz hale getirmek için yapabileceğim bir şey var mı? Eğer

HTML

.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

Dönüşümler Chrome'da geçişler daha iyi çalışmıyor gibi görünüyor

<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 jsfiddle görüntüleyemezseniz Burada

kodudur. Bu deneyin: In/out tek bir hızlı fare çok geç gitmiş olmalı

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

titreyen etkisi.

Answer 2

Temel mesele

bir animasyon yavaş çalışıyor ve düzensiz görünüyor, sadece her zaman vardır tarayıcısı sınırlarını ifşa ediyor.

Tarayıcılar animasyonlar oluşturmak için özel bir iş parçacığına sahip değil. Animasyonlar, UI olayları gibi diğer tarayıcı etkinlikleri ile rekabet etmek zorunda. Ve bazen tarayıcı da bilgisayarda çalışan diğer yazılımlarla rekabet ediyor. Ayrıca, tarayıcıların kullanabileceği donanım hızlandırması biraz sınırlıdır.

Animasyonun doğal düzgünsüzlüğünü daha da belirgin hale getiren, animasyonun başlangıcında ve/veya sonunda, yavaşlama ile animasyonlar daha da yavaş çalışır.

Çözümler

çok açık olmaktan düzensizlikleri önlemek için basit bir çözüm animasyon hızını artırmak, ve isteğe bağlı olarak kaldırmak veya hafifletilmesi kullanımını azaltmak için. Başlangıçta ve sonda yavaşlamayan bir tür hareket hızı kullanmak mümkün olabilir.

Diğer bir seçenek de, sorunu azaltması gereken WebGL (HTML5 kanvas etiketinin 3B içerikli) donanım hızlandırmasını kullanmaktır. Donanım hızlandırması tarayıcılarda ve cihazlarda daha yaygın ve daha iyi desteklendiğinden, eski Flash animasyonları kadar sorunsuz çalışan karmaşık animasyonlar gerçekleştirmeye başlamalıdır.

Answer 3

Güncelleme artık kendi iplik ....

CSS- CSS ve JS animasyonlar işlemek @Matt Coughlin mesaja yanıt olarak 2017

, doğal olarak animasyon destekleyen tarayıcılar temel olarak desteklenen temel animasyonlar ve Web Animasyonları, genellikle "compositor thread" olarak bilinen bir iş parçacığı üzerinde işlenir. Bu, tarayıcının stil, düzen, resim ve JavaScript'in yürütüldüğü "ana iş parçasından" farklıdır. Bu, tarayıcı ana iş parçacığında bazı pahalı görevler yürütüyorsa, bu animasyonların kesintiye uğramadan devam edebilmesi anlamına gelir.

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

Bu geliştiriciler Doküman ayrıca sen, düzenini veya boya tetikleyen özelliklere animasyon kaçınmalıdır olabilir @ user1467267 ...

den şu anda kabul cevabı destekler. Çoğu modern tarayıcı için, bu, opaklığa veya dönüşümüne sınırlayıcı animasyonlar anlamına gelir; Animasyonun JavaScript veya CSS ile ele alınması önemli değil.

belge aynı zamanda tarayıcı bu özellikleri için ek optimizasyon gerçekleştirmek böylece animasyon olacaktır özellik için will-change özelliğinin kullanımını uygulayan önerir. Kişisel deneyimlerimde, bu sadece opaklık ve dönüşüm için kromda fark edilebilir gibi görünüyor.

element{ 
    will-change: transform, opacity; 
}