将-变化中断显示位置绝对div :悬停

Question

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

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

Answer 1

与通常的看法相反，将更改属性实际上可能会对元素的视觉外观产生影响，因为如果与堆叠上下文一起使用来创建属性(例如，position、opacity、transform) ，则会创建一个新的CSS堆叠上下文，然后再进行实际转换。

因此，这可能会更改布局，因为可以更改层的顺序(哪个元素高于哪个元素)。

在您的例子中，通过will-change: opacity创建新的堆叠上下文会导致布局问题。隐藏的div是绝对定位的，因此不增加父母/祖父母的大小，因此由.menu-wrapper裁剪，后者现在具有堆叠上下文。

对此，您有多种解决方案。

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