Question

我正在尝试使用CSS Containment（contain: layout），但它似乎无法在Chrome 62上正常运行。

我想知道使用contain: layout的正确方法或我的误解。

代码在这里：

的index.html：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>CSS Containment</title>
    <script src="main.js" defer></script>
</head>
<body>
    <div id="container" style="contain: layout; height: 300px; width: 300px">
    </div>
</body>
</html>

main.js：

const container = document.querySelector('#container');

setTimeout(() => {
    const elem = document.createElement('div');
    elem.textContent = 'content';
    container.appendChild(elem);
}, 100);

我希望＃{1}}之后#container元素呈现为布局根，但Chrome Dev Tool会显示根仍然是#document。

另一方面，appendChild(elem)或contain: layout size正常工作，这意味着#container成为布局根。

其他浏览器尚不支持CSS Containment，因此我无法识别其特定于Chrome或规格。

如果您有任何想法，请联系我。

CSS Containment（包含：layout）在Chrome 62上不起作用

0 个答案: