问题标签 [css-contain]

我正在尝试使用 CSS Containment( contain: layout)，但它似乎无法在 Chrome 62 上正常工作。

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

代码在这里：

索引.html：

主.js：

我希望 #container 元素在 之后呈现为布局根appendChild(elem)，但 Chrome 开发工具显示根仍然是 #document。

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

其他浏览器还不支持 CSS Containment，所以我无法确定它是特定于 Chrome 的还是符合规范的。

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

我正在开发一个 Ionic 4 应用程序，我遇到了一个奇怪的问题，即他们.scroll-content班级内的固定位置页脚。我可以在没有 Ionic 的情况下重现这个，所以我在更一般的意义上问这个问题：

我有一个容器元素（在我的例子中由 Ionic 提供），它具有：

加上一些顶部/底部/左侧/右侧值来定位它，它们不会影响问题。

里面有比这个容器高的内容，导致容器滚动，还有一个我用position: fixed.

contain但是，除非我从属性中删除“布局”值，否则页脚根本不会像粘性一样。

现在我想假设 Ionic 添加这个类是有目的的，所以我不想覆盖它。破坏position: fixed行为是预期的吗？如果是这样，我该怎么做才能解决它并再次修复我的页脚？

首先，我对“css contains”的想法是这样的。

1. 带有“contain: strict”的 dom 树会将渲染周期与整个 dom 树隔离开来。
2. 如果这个孤立的 dom 树发生变化，浏览器将能够获得性能优势。因为计算成本降低了。

例子

但是，在这个例子中，当应用了“contain:strict”时，你可以看到渲染性能变差了……<br />为什么会这样？我想知道为什么。

我终于开始content-visibility: auto在我的项目中实施以改善渲染时间和总体性能。我有一个组件inset在页面上有一些，但是在某些情况下，我允许组件的子组件溢出容器以使组件完全溢出。

现在，当我尝试添加content-visibility: auto到这个父组件时，我的组件在父组件的插入边界处被截断（它实际上表现得像overflow: hidden）。我尝试添加overflow: visible到我的样式中，但完全没有效果。

Codepen 示例（取消注释content-visibility以查看问题；您将需要 Chromecontent-visibility支持）

我可以content-visibility: auto在不隐藏溢出的情况下使用吗？