6

に問題がありwill-changeます。なぜこの問題が発生するのかわかりませんが、非表示のwill-changediv (ホバー時に表示されるはず) を持つリストを持つラッパーを追加すると、その div が表示されなくなります。t はその一部を表示するか、まったく表示しません (ブラウザによって異なります)。なぜそれがその機能を壊すのか分かりますか?

リンク -> http://jsbin.com/rukanajugi/1/edit?html,css,output

4

1 に答える 1

7

一般に信じられていることとは反対に、will-changeプロパティは、実際の変換が行われる前にプロパティを作成する Stacking Context と共に使用すると、新しい CSS Stacking Context を作成するため(例: position、opacity、transform) 、要素の視覚的な外観に実際に影響を与える可能性があります。

したがって、これにより、レイヤーの順序 (どの要素がどの要素の上にあるか) が変更される可能性があるため、レイアウトが変更される可能性があります。

あなたの場合、を介して新しいスタッキング コンテキストを作成するwill-change: opacityと、レイアウトの問題が発生します。非表示divの は絶対位置に配置されるため、親/祖父母のサイズを大きくしないでください。したがって.menu-wrapper、スタック コンテキストを持つ によってトリミングされます。

これには複数のソリューションがあります。

  • 使用する.menu-wrapper { overflow: visible; }
  • 次のようにサイズを大きくします。.menu-wrapper { height: 200px; }
  • 属性のプロパティを作成するスタッキング コンテキストを使用しないでくださいwill-change。たとえば、 using.menu-wrapper { will-change: border-width; }は Stacking Context を作成しません。ただし、.menu-wrapper が Stacking Context (例: opacity: 0.9999) を作成するプロパティを取得するとすぐに、再び壊れます。
于 2016-06-03T09:31:39.163 に答える