将更改中断显示位置绝对div：悬停

Question

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

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

Answer 1

与普遍看法相反， will-change 属性实际上可能会对元素的视觉外观产生影响，因为如果与堆栈上下文创建一起使用，会创建一个新的CSS堆栈上下文属性（例如position，opacity，transform）之前实际转化。

这可能因此改变布局，因为层的顺序（哪个元素高于哪一个）可能会改变。

在您的情况下，通过will-change: opacity创建新的堆叠上下文会导致布局问题。隐藏的div位于绝对位置，因此不会增加其父母/祖父母的大小，因此会被.menu-wrapper裁剪，而.menu-wrapper { overflow: visible; }现在具有堆叠背景。

您有多种解决方案，例如

• 使用.menu-wrapper { height: 200px; }
• 像这样增加大小：will-change
• 不要在.menu-wrapper { will-change: border-width; }属性上使用堆叠上下文创建属性。例如。使用opacity: 0.9999不会创建任何堆叠上下文。正如您的.menu-wrapper获取属性（创建堆叠上下文（例如puts false or true））一样，它会再次中断。