Question

我目前在一个网站上工作，该网站上有一个包含2张大图片（大约9000像素）的页面。这个想法是人们可以点击并拖动，以查看图像的两侧，就像谷歌地图一样。

起初我只用彼此相邻的2张图片构建它。在拖动动画父div时，我设法偶尔获得一次复合绘画，但没有实际绘制（绘制）。我是通过编辑鼠标事件的translate3d来完成的。

这一切都像一个魅力非常顺利，直到我为父母添加了额外的div。现在，当我更改translate3d时，它必须完成recalculate style - ＆gt; layout - ＆gt; paint - ＆gt; composite layers。

首先，结构是：

<div class="container" style="transform: translate3d(-50%)">
    <img src="path/to/img.jpg"><img src="path/to/img.jpg">
</div>

更改translate3d时，一切都很好，偶尔只有Composite Layers。

然而，当我把它改为以下时，所有都是香蕉：

<div class="container" style="transform: translate3d(-50%)">
    <img src="path/to/img.jpg"><img src="path/to/img.jpg">
    <div>+</div>
</div>

如前所述，现在编辑translate3d时，必须完成Recalculate style。

我确保div和图片都添加translateZ(0)，但这些图层都有图层，但这并没有帮助:(

我很确定我不了解铬的整个油漆序列细节，但经过无数个小时的阅读后我无法找到确切的东西。我希望有人能对这件事情有所了解。

非常感谢！

保罗回复后编辑：

Recalculate Style由以下行触发：

this.background.style.transform = 'translate3d(' + (this.panoramaX - this.previewOffset) + '%, 0, 0)';