Google chrome Chome timeline-添加子项会导致额外的布局/回流事件

我目前正在一个网站上工作，这个网站有一个页面，里面有两个大图片（加起来大约9000px）。这个想法是人们可以点击和拖动，看到图像的侧面，就像谷歌地图一样

起初，我只是用两个相邻的图像来构建它。在拖动父div时设置动画时，我偶尔只能获得一次合成绘制，但没有实际绘制（绘制）。我通过编辑鼠标事件上的

translate3d

来实现这一点

这一切都像一个魅力和非常顺利，直到我添加了一个额外的div的家长。现在，当我更改translate3d时，它必须执行一个完整的

重新计算样式

->

布局

->

绘制

->

复合层

因此，最初的结构是：

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

正如前面所说，现在在编辑

translate3d

时，它必须执行一个完整的

重新计算样式

我通过在div和图像上添加
translateZ（0）
来确保它们都有层，但这没有帮助：(

我很确定我不太了解铬的整个绘画顺序的细节，但是经过无数个小时的阅读，我找不到确切的东西。我希望有人能对这件事有所了解

非常感谢

在Paul的回复后编辑：

重新计算样式
由以下行触发：

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

这是一种预感，但我怀疑布局是由于Blink试图确定是否需要滚动条造成的。您能否将
溢出：隐藏
添加到
容器的父级
？@PaulLewis感谢您的回复！不幸的是，它没有修复布局：（在时间轴中，我可以看到以下代码负责整个
重新计算样式
（将在原始问题中编辑）如果是这种情况，默认情况下，元素上的put
将更改：transform
。这将确保无论应用的是translate3d，它始终是一个层。太糟糕了，这没有解决问题@PaulIrish，在此之前，我还尝试使用translateZ（0）强制该层.我现在有点不知所措，将继续构建其余部分，稍后再尝试修复。当我发现一些问题时，我会让你们知道！你们有没有可能在某个URL上弹出一个测试用例。我想看一下。
this.background.style.transform = 'translate3d(' + (this.panoramaX - this.previewOffset) + '%, 0, 0)';