Chrome DIV 未完全绘制

Question

我使用的是 Chrome 版本 41.0.2272.118。

页面上有一个特定的 DIV，如果我通过分配其 innerHTML 或 innerText 来更改其内容，则页面上的另一个 DIV 已损坏。

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

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

有时，稍后的 DOM 修改可能会触发修复损坏的 DIV，以便再次绘制其右侧填充，并按照损坏前的方式重新包装。

---

这是一个问题的小例子：

1. 如果绝对 div 在表中
2. 如果在异步回调中使用 innerHTML 更改绝对 div 的内容
3. 这是在异步回调之前完成的 `document.body.style.cursor = "progress";
4. 那么表格第一列中的所有单元格将被绘制为错误的背景宽度

HTML：

<table>
    <tr>
        <td>
            <div class="wrapper">
                <div id="twoandthree">
                    <div id="two">two</div>
                    <div id="three">three</div>
                </div>
            </div>
        </td>
    </tr>
</table>
<button id="button">update two</button>

CSS：

#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;
}

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);
});

我将不胜感激。

谢谢

Answer 1

有时我也会注意到 Chrome 的奇怪渲染怪癖。尝试将-webkit-transform: translateZ(0) 应用于您的 CSS 强制 GPU 加速。

这里有更多关于它的信息：http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/