Dlaczego opóźnienia CSS są opóźnione w mobilnej wersji Chrome?

Question

Podczas pracy nad funkcją powiększania obrazu CSS napotkałem problem z wydajnością w mobilnej przeglądarce Chrome.

Opis: Gdy próbuję przeskalować obraz, dodając CSS przekształcić się bezpośrednio do obrazu wszystko działa dobrze. Zmiana powiększenia jest gładka jak masło z 60fps (JSFiddle).

<img src="http://placehold.it/1000x1500" style="transform:matrix(2, 0, 0, 2, 0, 0);" /> 

Problem: Ale jeśli mogę zawinąć obraz w pojemniku div i starają się przekształcić pojemnik przejście jest bardzo laggy (JSFiddle). Przejście rozpoczyna się z dużym opóźnieniem i nie jest płynne. Wygląda na to, że jest to tylko mobilny problem z Chrome, ponieważ nie dzieje się to w innych przeglądarkach, takich jak Firefox na Androida, tylko na moim urządzeniu mobilnym (Nexus 5) i niektórych innych urządzeniach z Androidem.

<div style="transform:matrix(2, 0, 0, 2, 0, 0);"> 
    <img src="http://placehold.it/1000x1500" /> 
</div> 

Czy ktoś wie co jest nie tak z CSS lub struktury HTML?

Answer 1

Wypróbowałem twój kod w chrome i transformacje były zdecydowanie w tyle. Tak, jest problem z kodem i, szczerze mówiąc, jest to całkiem proste. Po prostu wypisz przejście po pierwszym przejściu, ale dodaj przedrostek -webkit- na początku.

Należy pamiętać, że -webkit- działa tylko w systemach Android, Google i Safari.
-moz- działa dla przeglądarki Mozilla Firefox.
-o- działa dla Opery.
-ms- prace dla programu Internet Explorer

Answer 2

Można

• spróbować umieścić will-change: transform na elemencie pojemnika.
• Wykonaj element pojemnika position: relative i obraz position: absoulte i całkowicie wypełnij pojemnik. Może zawierać mniej obliczeń dla każdej ramki przeglądarki.

Answer 3

http://jsfiddle.net/wsgfz/5/

**Transformations seem to work better than transitions in Chrome. Try this:** 
     The flickering effect one quick mouse in/out should be gone too now. 

Answer 4

Greensock Wtyczka jest zdecydowanie najlepszy pod względem wydajności widziałem. Jakiś czas temu dokonałem głębokiego studium i testów, i to zdecydowanie jedna z najlepszych wtyczek do animowania elementów.

Jest lekki, szybki i łatwy w użyciu.

Co z wydajnością?Spójrz na własną rękę: https://www.greensock.com/js/speed.html

Tu masz przykład stosując gsap Biblioteka:

var content = document.getElementById('zoom-container').children[0]; 
 

 
document.getElementById('zoom-in').addEventListener('click', 
 
    function zoomIn() { 
 
    TweenLite.to(content, 1.5, {scale:1}); 
 
    }, false); 
 

 
document.getElementById('zoom-out').addEventListener('click', 
 
    function zoomOut() { 
 
    \t TweenLite.to(content, 1.5, {scale:0.2}); 
 
    }, false);

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
img { 
 
    display: inline-block; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#zoom-container div { 
 
    position: relative; 
 
    /*some prefix*/-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
} 
 
#zoom-toolbar { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    
 
} 
 

 
.zommIn { 
 
    
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 
 

 
    <div id="zoom-container" style="height:100%; width:100%;"> 
 
    <div> 
 
     <img src="http://placehold.it/1000x1500" /> 
 
    </div> 
 
    </div> 
 

 
    <div id="zoom-toolbar"> 
 
    <button id="zoom-in">Zoom in</button> 
 
    <button id="zoom-out">Zoom out</button> 
 
    </div>

Answer 5

Używaj JavaScript ustawić classnames, ale niech CSS całkowicie obsługiwać przejścia i GPU wyzwalania przyśpieszenie.

Proponuję użyć atrybutu zdarzenia HTML onclick, aby ustawić wyzwalacze dla dwóch funkcji: zoomIn i zoomOut.

HTML

<div id="zoom-container"> 
     <img src="http://placehold.it/1000x1500" /> 
    </div> 

    <div id="zoom-toolbar"> 
     <button id="zoom-in" onclick="zoomIn()">Zoom in</button> 
     <button id="zoom-out" onclick="zoomOut()">Zoom out</button> 
    </div> 

Masz teraz dwie funkcje, które wyróżniają pożądane CSS ClassNames.

JavaScript

function zoomIn() { 
     var element = document.getElementById("zoom-container"); 
     element.className = 'zoomed-in'; 
    }; 

    function zoomOut() { 
     var element = document.getElementById("zoom-container"); 
     element.className = 'zoomed-out'; 
    }; 

Aby osiągnąć pożądany animacji CSS może być teraz o wiele prostsze, jak również.

CSS

#zoom-toolbar { 
     position: absolute; 
     top: 0; 
    } 

    #zoom-container.zoomed-out { 
     transition: transform 0.3s ease-in-out; 
     transform: matrix(0.2, 0, 0, 0.2, 0, 0); 
    } 

    #zoom-container.zoomed-in { 
     transition: transform 0.3s ease-in-out; 
     transform: matrix(2, 0, 0, 2, 0, 0); 
    } 

Stamtąd można wprowadzić dodatkowe CSS i sprawdzić, czy późniejsze zmiany są złamania.

Stworzyłem CodePen example, aby zademonstrować.

Dobry artykuł o płynnych przejściach CSS to here.