为什么 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

使用 JavaScript 设置类名，但让 CSS 完全处理过渡并触发 GPU 加速。

我建议使用onclick HTML 事件属性来设置两个函数的触发器，zoomIn 和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>

您现在有两个函数，用于设置所需的 CSS 类名。

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 现在也可以简单得多。

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

从那里，您可以引入额外的 CSS 并测试后续更改是否中断。

我创建了一个CodePen example 来演示。

一篇关于平滑 CSS 过渡的好文章是here。

Answer 2

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>

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

你可以

• 尝试将will-change: transform 放在容器元素上。
• 制作容器元素position: relative 和图像position: absoulte 并完全填充容器。浏览器每帧的计算量可能会更少。

Answer 5

我在 chrome 中试用了您的代码，转换肯定滞后。 是的，您的代码有问题，坦率地说，这很简单。 只需在第一次转换后再次编写转换，但在其开头添加前缀 -webkit-。

请注意，-webkit- 仅适用于 Android、Google 和 Safari。
-moz- 适用于 Mozilla Firefox。
-o- 适用于 Opera。
-ms- 适用于 Internet Explorer