Javascript 镀铬分区未完全涂漆

我使用的是Chrome版本41.0.2272.118

页面上有一个特定的DIV，如果我通过指定其innerHTML或innerText来更改其内容，那么页面上的另一个DIV就会损坏

损坏的结果是不再绘制损坏的DIV的右填充。但是，根据开发人员工具，DIV占用相同的空间，并且具有相同的宽度。此外，即使上面没有DIV，损坏的DIV的底部边框仍会被绘制。 奇怪的是，即使div的宽度相同，div中的任何文本都会被重写，其中的句子会占用更多的行

更改页面上其他div的innerHTML或innerText不会导致任何损坏

有时，稍后的DOM修改可能会触发修复损坏的DIV，以便再次绘制其右填充，并按照损坏前的方式对其进行重写

---

下面是问题的一个小例子：

如果绝对div在表中

如果在异步回调中使用innerHTML更改绝对div的内容

这是在异步回调`document.body.style.cursor=“progress”之前完成的

然后，表格第一列中的所有单元格将以错误的宽度绘制背景

HTML:

JavaScript:

var two = document.getElementById("two");
var button = document.getElementById("button");
button.addEventListener('click', function () {
    document.body.style.cursor = "progress";
    setTimeout(function () {
        document.body.style.cursor = "";
        two.innerHTML = "aaa";
    }, 500);
});

我将非常感谢您的帮助

---

谢谢你

有时候我也会注意到Chrome的渲染怪癖。尝试将

-webkit transform:translateZ（0）

应用于CSS强制GPU加速

---

这里有一些关于它的更多信息：

谢谢你的建议。它没有帮助把它放在损坏的div或者它的一个孩子身上。你能附上两个div的截图吗？

#twoandthree {
    position:relative;
    min-width:80px;
    overflow:hidden;
}
#two {
    position: absolute;
    white-space:nowrap;
    display:inline-block;
}
#three {
    float: right;
    position:relative;
    display:inline-block;
}
table {
    border-spacing: 10px;
}
.wrapper {
    background: lightblue;
}

var two = document.getElementById("two");
var button = document.getElementById("button");
button.addEventListener('click', function () {
    document.body.style.cursor = "progress";
    setTimeout(function () {
        document.body.style.cursor = "";
        two.innerHTML = "aaa";
    }, 500);
});