问题标签 [will-change]

我有一个问题will-change。我不知道它为什么会导致这个问题，但是当我添加will-change包装器时，我在其中有隐藏 div 的列表（应该在悬停时显示）它会中断显示该 div。t 显示部分或根本不显示（取决于浏览器）。您知道为什么它会破坏该功能吗？

链接-> http://jsbin.com/rukanajugi/1/edit?html,css,output

我正在使用语义用户界面，并设法缩小了 css 属性中的一些未定义行为will-change（我在他们的模态中找到了它）：

我只在 chrome 中测试过这个。有没有人有更多关于这里发生的事情的信息？为什么will-change要对实际布局做任何事情？

在本文中，作者声明不需要永久存储样式将更改css样式文件will-change: transform;，而应使用javascript动态添加

Аlso 作者示例脚本：

我可以使用这个脚本，他是否对我有用？

我很高兴听到有关如何有效利用风格的建议will-change

我正在尝试使用 CSS will-change 属性而不是 translateZ(0) hack。

我了解需要在元素更改之前应用该属性。但我怀疑它是否需要在变化时也应用。

我有兴趣知道是否需要在元素转换之前和期间应用该属性，或者仅在之前应用该属性。

onresize 可用于了解窗口已调整大小。在窗口调整大小之前是否有任何类似的通知/事件。我想在窗口调整大小开始之前对某些元素设置 will-change，然后在窗口调整大小后将其删除。

我看到了一个奇怪的问题，并花了很多时间试图通过 SO/blogs 和在 Chrome 的错误跟踪器中找到一个活跃的问题来追踪它。

链接：https ://jsfiddle.net/Lftwqh8p/1/

问题：这只发生在 Chrome 中。在 JS 中，我有一个注释掉的行来在使用 mixins 之间切换。两者都有自己的问题，具有相同的根本问题。

问题图片：

所以我们看到的是滚动条的宽度

直接影响第一列的偏离程度。如果我们在 IE 或 Firefox 中查看它，我们会看到它按预期工作（采用全宽，或者列标题位于正确的位置）。

如果我们删除 will-change: transform 或 position: sticky 的 CSS，这将解决问题。

所以我怀疑这是一个浏览器问题，特别是 Chrome 如何在 Stacking Context 或 Compositing Layer 上呈现这些问题。这些都发生在使用 position sticky 和 ​​will-change 设置为 transform 时。

我找不到有关此类问题的任何信息，因为我们的用例似乎对我们来说有点特定，但是是必要的（性能）。

关于问题可能是什么的任何想法？

我正在尝试优化我的网络应用程序的滚动。我有包含大量数据的数据表，滚动变得非常糟糕。我添加will-change: transform到数据表中，但它破坏了我的表头position: fixed（我将它们固定以允许它们随视口滚动）。元素根本不随视口移动，它们只是停留在文档流中。

但偶然我发现，如果我will-change:opacity改用它，我的固定标题就可以了。有人可以解释这种行为吗？我找不到任何说明他们应该采取不同行动的文件。

这是一个代码笔，其中包含我正在谈论的示例。在值之间切换，并在蓝色 div 中滚动。 https://codepen.io/bkfarns/pen/aLYgrN

这也是笔的基本代码：

html:

CSS：

我一直在尝试 javascript 动画，并注意到在使用will-change属性并将transform3D()动画元素分离到新层以进行 gpu 渲染时的性能差异。当我尝试为元素设置动画时会发生这种情况scaling，该元素也具有border-radiuscss 属性。 在这里写代码

没有will-change属性浏览器将执行额外的光栅化绘制（在 屏幕截图上的光栅化线程 1 中）

will-change没有光栅化绘画动作（截图）。

当我尝试在现实项目中一次为多个元素设置动画时，情况会变得更糟（尤其是在移动设备上会受到伤害）。（有 will-change，没有 will-change）

所以问题是：如何will-change设法提供这种优化，即使它应该做与transformZ(0)（为 gpu 渲染创建新层）基本相同的事情。有没有什么方法可以在不使用的情况下优化这个动画will-change？

我正在做这个（仍在进行中）项目，我注意到低端设备上的一些性能不佳，当然目前有很多动画同时进行（主要使用绿色袜子应用程序平台创建）我可以用 javascript 删除 matchmedia api，但我会保留主要四个部分的主要动画，这是 css：

基本上，当单击标题时，其容器接收 is-expanded 类，主体也接收 ha-expanded-item。

我在这里使用 will change 并且我启用了图像缓存（还没有用于 css 和 javascript），我在 cloudfront 上启用了 gzip 压缩，但我仍然注意到移动设备上的一些性能不佳 有人可以给我一个提示吗？也许我必须使用会以不同的方式改变？谢谢

我有一个父元素和一个子元素：

没有will-change:transform样式的.child元素，无论父元素的位置如何，overflow:hidden都将基于窗口定位。
现在.parent具有这种风格，不仅top和left计算.childfrom .parent，而且也overflow:hidden适用于.child。如果我们在这里添加看一下
，似乎position:fixed将被完全忽略： https ://jsbin.com/beluweroti/1/edit?html,css,outputwill-change:transform

注意：我没有将此样式添加到.parent，所以我不能简单地删除它。

我可以处理定位，并设置正确的leftand top，但问题是
我如何才能忽略overflow:hidden固定位置的孩子？