html - 为什么 CSS 转换在移动版 Chrome 中滞后？

Question

在我研究 CSS 图像缩放功能的过程中，我遇到了移动版 Chrome 的性能问题。

描述: 如果我尝试通过将 CSS transform 属性直接添加到图像来缩放图像，一切正常。缩放过渡像 60fps 的黄油一样平滑 (JSFiddle)。

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

问题:但是，如果我将图像包装在一个 div 容器中并尝试转换该容器，转换就会非常缓慢 (JSFiddle)。过渡开始时有很大的延迟，而且并不顺利。 这似乎只是移动 Chrome 的一个问题，因为它不会在其他浏览器(如 Android 上的 Firefox)中发生，只会在我的移动设备 (Nexus 5) 和其他一些 Android 设备上发生。

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

有人知道 CSS 或 HTML 结构有什么问题吗？

Answer 1

Greensock 插件是迄今为止我所见过的性能最好的插件。前段时间我做了深入的研究和一些测试，它是迄今为止最好的动画元素插件之一。

它轻巧、快速且易于使用。

性能如何？自己看看:https://www.greensock.com/js/speed.html

这是您使用 gsap 库的示例:

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>