HTML

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

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

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

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

性能怎么样？看看你自己：https://www.greensock.com/js/speed.html

以下是使用 gsap 库的示例：

＆＃13;

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

＆＃13;

* {
  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 {
  
}

＆＃13;

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

＆＃13;

Answer 3

使用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 4

我在chrome中尝试了你的代码，转换肯定是滞后的。是的，您的代码存在问题，坦白说这非常简单。只需在第一次转换后再次写入转换，但将前缀-webkit-添加到它的开头。

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

Answer 5

你可以

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

为什么CSS过渡滞后于移动Chrome？

5 个答案:

HTML

的JavaScript

CSS