Перемены воли-изменения, показывающие абсолютное положение позиции на:hover

Question

У меня проблема с will-change, Я понятия не имею, почему это вызывает эту проблему, но когда я добавляю will-change на обертке, в которой у меня есть список со скрытыми элементами div (который должен отображаться при наведении курсора), он разрывается, показывая, что элементы div. показывает часть этого или нет вообще (зависит от браузера). У вас есть идея, почему это нарушает эту функциональность?

Ссылка -> http://jsbin.com/rukanajugi/1/edit?html,css,output

Answer 1

Вопреки распространенному мнению, свойство will-change может фактически влиять на визуальный внешний вид элемента, поскольку оно создает новый контекст стека CSS, если используется со свойствами создания контекста стека (например, position, opacity, transform) ДО фактического преобразования было сделано.

Следовательно, это может изменить макет, так как порядок слоев (какой элемент выше какого) может быть изменен.

В вашем случае создание нового контекста стека will-change: opacity, вызывает проблему макета. Скрытый divs позиционируются абсолютно, поэтому не увеличивают размер своих родителей / бабушек и дедушек и поэтому обрезаются .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), он снова сломается, однако.