Javascript Google Chrome硬件加速/css缩放导致合成错误

背景：

我正在使用JQuery制作一个2D HTML/CSS动画。这将放置大约25个大小相同的图像，并根据需要移动一些图像。UI元素具有像素位置，并且比全尺寸图像小得多。我最近从强制硬件加速表单backface visibility:hidden改为将更改css属性。整个动画由包含在其中的div和css transform属性缩放

问题：

具体来说，在谷歌Chrome中，合成在某些场景中开始出现故障，这是一种可复制但看似随机的方式。图像被部分切除，图像被放置在它们应该在上面的图像后面，诸如此类。上下滚动会将某些故障替换为其他故障，更改某些项目的显示属性（由于UI交互而发生）也是如此

问题：

是什么导致了这种行为，为什么我的所有其他测试浏览器（firefox、opera、internet explorer、edge）都没有受到影响，我如何避免这种情况

我的当前状态：

从我到目前为止的尝试和我的直觉来看，这是由于过度使用硬件加速或transform:scale css属性，或两者的组合而导致的问题。我目前正在研究其他的缩放方法，作为最简单的“修复”问题的方法，但我仍然不知道是什么导致了这一切。遗憾的是，我的所有UI元素都不是父元素的整洁百分比

我的尝试：

首先，我尝试手动设置所有元素的z索引。遗憾的是，这一无所获

有时上下滚动或与UI交互似乎可以解决问题，因此我尝试添加一种方法，强制浏览器在代码中的某些点重新进行布局。有争议的是，这只会让事情变得更糟，因为它增加了大量的白色闪烁，并未能解决问题

我尝试将动画库从jquery切换到velocity，但没有效果

我删除了迫使硬件加速的“黑客”。这修复了合成问题，但在chrome中重新引入了断断续续的动画（仅限）

然后，我试图通过添加和删除包含“hack”的css类，根据需要分配硬件加速。行为与第4项相同

我尝试使用will change而不是backface visibility hack，但这只是将行为设置回我开始尝试修复此问题之前的状态

我试图在保持硬件加速的同时减少层的数量。我在元素上使用了jquerys“.hide（）”，只在动画中使用了一次，将最终图片替换为单幅图像。这并没有解决复合“mashup”的问题

最后，我禁用了css transform scale属性，该属性修复了意外行为，但这是必需的，这样我就可以根据屏幕大小缩放动画

一些代码：

下面是动画容器的一些css代码

.animationContainer {
    position: relative;
    width:2560px;
    height:1440px;
    /*transform: scale(0.55);*/
    transform-origin: top left;
    overflow: hidden;
    display: inline-block;
}

还有一些javascript详细描述了我对大多数对象使用的动画，使它们“落入”场景中

function fadein(el, direct)
{
    var falldistance = 150;
    $(el).show();
    $(el).css("opacity", 0.0);
    switch(direct) {

    case 0: 
    $(el).css("top", "-="+falldistance);
    $(el).animate(
    {
        top: "+="+falldistance,
        opacity: 1.0
    }, 1000);
    break;
[...]

我不知道更多的代码会有多有用，如果您需要更多，请询问。网页设计不是一个我有很多经验的领域，我的想法正在慢慢地枯竭如有任何帮助或建议，将不胜感激

视觉示例：

这是其中一个bug的示例：

这是在浏览器中向下和向上滚动后的外观：

---

我添加了一些图片来展示这种不可预测但可复制的行为，希望最终能获得一些信息。希望这有助于人们看这个！试着做一个决定。删除所有多余但仍允许重现问题的内容。最后，您应该只有2到3个div和少于15个css规则。从那里，我们将能够开始调查，并可能帮助您找到解决办法。此外，由于这是一个铬臭虫，请考虑打开他们的问题。