问题标签 [will-change]

我正在使用 Jekyll 和 Netlify 建立一个网站。到目前为止，一切都在工作。我在 SCSS 中使用样式表，Jekyll 在构建时将其转换为 CSS。我尝试will-change像规范所说的那样添加属性。但是，构建失败并出现以下错误：

这是我使用的破坏它的 SCSS：

我在这里做错了什么？如果我应该提供更多信息，请告诉我。

我使用will-change: transform了一个使滚动平滑的父元素。但是有一些子 div 尽管使用了position: fixed.

为了演示，我创建了这个基本网页。

请注意，当我向下滚动红色框时，黄色和绿色框会离开视口。

代码：

如何将这些子 div 保持在固定位置？

根据谷歌：

一般的经验法则是，如果动画可能在接下来的 200 毫秒内触发[...] ，那么对动画元素进行 will-change 是个好主意。因此，在大多数情况下，您打算在应用程序当前视图中设置动画的任何元素都应该为您计划更改的任何属性启用 will-change。

所以我的问题是，可以will-change在任何属性实际动画之前通过 Web Animations API 应用，这会产生预期的效果吗？或者在幕后发生的任何事情的生命周期中为时已晚，will-change无法正常工作？

似乎通过这个 API 修改的属性实际上并没有作为 CSS 属性反映在 DevTools 中，所以我无法验证这是否真的应用will-change了。

想法的例子：

css 属性“will-change”使动画性能更好。但似乎它会在特殊情况下禁用 IOS 移动浏览器中的某些渲染。

以下代码在 IOS 移动浏览器中的行为：

1. 点击“点我”，添加计数length；
2. 使用 new 渲染组件length；
3. “值”显示错误length，“相同值”显示正确length。

“值”和“相同值”的区别在于css代码，我想可能是“will-change”触发IOS移动浏览器优化渲染html。“价值”中的正确length已被优化。

所以请有人解释这个奇怪的问题。谢谢。

Bug Demo，用iphone浏览器打开

错误视频，如果没有 iphone

源代码

在MDN web docs 中提到堆叠上下文是在这些场景中形成的：

6. 不透明度值小于 1 的元素
7. will-change具有指定将在非初始值上创建堆叠上下文的任何属性的值的元素

但是当我设置will-change为opacity（小于 1 的非初始值）时，堆叠无法按预期工作（蓝色 div 低于红色 1），请参阅此小提琴

其他一些场景按预期工作；蓝色 div 高于红色一个（链接到小提琴）

2. 具有绝对或相对位置值且 z-index 值不是 auto 的元素
3. 作为网格容器的子元素的元素，其 z-index 值不是 auto

我做错了什么，有没有其他方法可以使堆叠上下文按预期工作

我问是因为有时我无法将位置更改为相对，因为这会影响该元素的绝对子元素

我一直在分析这段代码，它是使用背景附件的替代方法：已修复，但有一些我似乎无法弄清楚的问题。我试图在网上找到答案，但没有成功。有人可以帮忙吗？代码是：

问题1：位置是否固定，固定背景颜色（深蓝色）和网址图像，使其在滚动时不会移动？

问题 2：哪些属性或属性修改背景颜色和/或背景图像？例如 top:0 和 left:0 是否只修改背景颜色？background -size 是否仅修改 url(jpeg)？

问题3：不需要在代码中添加(will-change:transform;)。

非常感谢。在过去的 3 天里，我一直在努力解决这个问题。

最近我深入研究了 CSS动画和过渡的主题。

我知道 CSS 属性will-change可用于向浏览器提示，该元素将在不久的将来更改（这可以提高渲染性能）。

有几个开发人员will-change用来提高性能的例子，例如：

• https://www.android.com/
• https://www.cube.eu/
• https://www.mrsandmr.com/

但是文档明确指出：

警告：will-change 旨在用作最后的手段，以尝试处理现有的性能问题。它不应该用于预测性能问题。

那么，需要考虑哪些基本因素，是否使用will-change- 或不使用？