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

Question

在我的CSS图像缩放功能工作期间,我在移动Chrome中遇到了性能问题.

描述: 如果我尝试通过直接将CSS 转换属性添加到图像来缩放图像,一切都很好.缩放转换像黄油一样平滑,具有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

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

请注意，-webkit-仅适用于 Android、Google 和 Safari。
-moz-适用于 Mozilla Firefox。
-o-为歌剧院工作。
-ms-适用于 Internet Explorer