will-change breaks 在 :hover 上显示绝对位置 div
will-change breaks showing position absolute div on :hover
我对 will-change 有疑问。我不知道为什么会导致这个问题，但是当我在包装器上添加 will-change 时，我在其中列出了隐藏的 div（应该在悬停时显示），它会中断显示 div。 t 显示其中的一部分或根本不显示（取决于浏览器）。您知道它为什么会破坏该功能吗？
与普遍看法相反，will-change 属性 实际上可能会对元素的视觉外观产生影响，因为它 创建一个新的 CSS 堆叠上下文，如果与堆叠上下文一起使用创建属性（例如 position、opacity、transform）BEFORE 进行了实际转换。
因此，这可能会改变布局，因为层的顺序（哪个元素在哪个元素之上）可能会改变。
在您的情况下，通过 will-change: opacity 创建新的堆叠上下文会导致布局问题。隐藏的 div 是绝对定位的，因此不会增加其 parents/grandparents 的大小，因此会被现在具有堆叠上下文的 .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），它就会再次中断。
我对 will-change 有疑问。我不知道为什么会导致这个问题，但是当我在包装器上添加 will-change 时，我在其中列出了隐藏的 div（应该在悬停时显示），它会中断显示 div。 t 显示其中的一部分或根本不显示（取决于浏览器）。您知道它为什么会破坏该功能吗？
与普遍看法相反，will-change 属性 实际上可能会对元素的视觉外观产生影响，因为它 创建一个新的 CSS 堆叠上下文，如果与堆叠上下文一起使用创建属性（例如 position、opacity、transform）BEFORE 进行了实际转换。
因此，这可能会改变布局，因为层的顺序（哪个元素在哪个元素之上）可能会改变。
在您的情况下，通过 will-change: opacity 创建新的堆叠上下文会导致布局问题。隐藏的 div 是绝对定位的，因此不会增加其 parents/grandparents 的大小，因此会被现在具有堆叠上下文的 .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），它就会再次中断。