6

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

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

4

1 回答 1

7

与普遍看法相反，will-change属性实际上可能会对元素的视觉外观产生影响，因为如果与 Stacking Context 创建属性（例如position, ）一起使用，它会创建一个新的 CSS Stacking Context opacity，然后再进行实际转换。transform

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

在您的情况下，通过 创建新的 Stacking Contextwill-change: opacity会导致布局问题。隐藏div的 s 是绝对定位的，因此不会增加其父母/祖父母的大小，因此会被 裁剪.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）的属性，它就会再次中断。
于 2016-06-03T09:31:39.163 回答