Question

我使用的是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：

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

Chrome DIV没有完全涂漆

1 个答案: