Why transition using CSS to mobile Chrome?

Question

During my work with CSS image scaling, I ran into a performance issue in mobile Chrome.

Description: If I try to scale images by adding the CSS transform property directly to the image, everything works fine. The zoom transition is smooth, like oil at 60fps ( JSFiddle ).

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

Problem: But if I wrap the image in a container div and try to convert the container, the transition is very slow ( JSFiddle ). The transition begins with a long delay and is not smooth. This seems to be a problem only with mobile Chrome, because it does not happen in other browsers like Firefox on Android, only on my mobile device (Nexus 5) and some other Android devices.

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

Does anyone know what is wrong with CSS or HTML structure?

Answer 1

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 2

The Greensock plugin is by far the best in terms of performance I've seen. Some time ago I was doing in-depth research and some tests, and this was by far one of the best plugins for animating elements.

Lightweight, fast and easy to use.

What about performance? See for yourself: https://www.greensock.com/js/speed.html

Here is your example using the gsap library:

 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() { 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 3

Use JavaScript to set class names, but let CSS fully handle transitions and trigger GPU acceleration.

I would suggest using the onclick HTML event attribute to set triggers for two functions, zoomIn and 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> 

You now have two functions that specify the desired CSS class names.

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

CSS can now be much simpler to achieve the desired animation.

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

From there, you can enter additional CSS and check if subsequent changes are broken.

I demonstrated the CodePen Example to demonstrate.

A good article on CSS smooth transitions is here .

Answer 4

I tried your code in chrome and the conversions were definitely lagging. Yes, there is a problem with your code, and frankly, it is quite simple. Just write the transition again after the first transition, but add the -webkit- prefix to the beginning of it.

Please note that -webkit- works only for Android, Google and Safari.
-moz- works for Mozilla Firefox.
-o- works for Opera.
-ms- works for Internet Explorer

Answer 5

You can

• try putting will-change: transform in a container element.
• Make the container element position: relative and the image position: absoulte and completely fill the container. Less computation may be required for each frame for the browser.