css - will-change 中断显示 :hover 上的绝对位置 div

Question

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

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

Answer 1

与普遍看法相反，will-change 属性实际上可能会对元素的视觉外观产生影响，因为如果与 Stacking Context Creating 一起使用，它会创建一个新的 CSS Stacking Context属性(例如position、opacity、transform)在进行实际转换之前。 p>

因此，这可能会改变布局，因为层的顺序(哪个元素在哪个元素之上)可能会改变。

在您的情况下，通过 will-change: opacity 创建新的 Stacking Context 会导致布局问题。隐藏的 div 是绝对定位的，因此不会增加它们的 parent /祖 parent 的大小，因此被 .menu-wrapper 裁剪，现在有一个堆叠上下文。

你有多种解决方案，例如

• 使用 .menu-wrapper { overflow: visible; }
• 像这样增加尺寸:.menu-wrapper { height: 200px; }
• 不要使用 Stacking Context 在 will-change 属性上创建属性。例如。使用 .menu-wrapper { will-change: border-width; } 不会创建任何堆叠上下文。但是，一旦您的 .menu-wrapper 获得创建堆叠上下文的属性(例如 opacity: 0.9999)，它就会再次中断。