6

I have an issue with will-change. I have no idea why it causes this problem but when I add will-change on wrapper in which I have list with hidden divs (which should show up on hover) it breaks showing that divs. t shows part of it or not at all (depends on browser). Do you have any idea why it breaks that functionality?

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

Dawid Krajewski
  • 324
  • 2
  • 15

1 Answers1

7

Contrary to common belief, the will-change property may actually have an impact on the visual appearance of the element, as it creates a new CSS Stacking Context if used with Stacking Context Creating Properties (e.g. position, opacity, transform) BEFORE the actual transformation was made.

This may therefore change the layout, as the order of the layers (which element is above which one) may be changed.

In your case, the creation of the new Stacking Context through will-change: opacity, causes the layout issue. The hidden divs are positioned absolute, therefore don't increase the size of their parents/grandparents and are therefore cropped by the .menu-wrapper, which now has a stacking context.

You have multiple solutions for this, e.g.

  • Use .menu-wrapper { overflow: visible; }
  • Increase the Size like this: .menu-wrapper { height: 200px; }
  • Do not use Stacking Context creating properties on the will-changeattribute. E.g. using .menu-wrapper { will-change: border-width; } won't create any Stacking Context. As Soon as your .menu-wrapper gets properties, which create a Stacking Context (e.g. opacity: 0.9999), it will break again, however.
MattDiMu
  • 4,873
  • 1
  • 19
  • 29
  • 1. I have to have `overflow: hidden` to hide menu items which dont fit in container 2. solution with fixed height is not what I'm looking for 3. so I shouldn't use `will-change` with `opacity`? – Dawid Krajewski Jun 03 '16 at 11:19
  • I have styles more or less like this `.menu-wrapper { transition: opacity 1s; will-change: opacity; opacity: 1; } .active .menu-wrapper { opacity: 0; }`. I understand that I shouldn't use `will-change` in that situation, right? – Dawid Krajewski Jun 03 '16 at 11:23
  • `will-change` is only useful, if you expect heavy changes on a property value of the content and want the browser to reserve memory for it / use the GPU for the animation. – MattDiMu Jun 03 '16 at 11:32
  • can you give me an example when should I use use `will-change` properly? – Dawid Krajewski Jun 03 '16 at 12:08
  • E.g. when doing performance-intensive animations (many elements) on mouse-over (`:hover`), which shall be done by the GPU and memory for it shall be reserved. But i think it's hard to make general statements about the usage, as using will-change too often may even result in the opposite (especially on cheap android mobile devices with low memory). – MattDiMu Jun 03 '16 at 12:25