javascript - 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/