So, if we have a div that is not visible in another situation z-index, opacity,parent overflow:hiddenand relative / absolute positioning, etc.
Is it necessary or just better to set display:nonein this div? I could assume that the browser will skip the display:nonediv, while some calculations will have to be done for the same result.
I ask this because I'm working on animation, and setting up display:nonerequires a callback when the animation is complete, so css3 transition should be avoided. (I know some browser offers a way to get a callback from a css3 transition, but for me it is not "universal.")
Another way to say:
Is it faster to reschedule / redraw the div with display:none, rather than with width:0;height:0, left:-100000px...?
UPDATE 2
I found out that in chrome, if you have svg inside a div with display:none, you cannot reference it with <use xlink:href="">. If you use something else, and not display:nonehow visibility:hidden, it works width:0;height:0.... This means that using display:nonemade the browser skip some steps.
Therefore, I will take it as a partial yes: use display:nonemay slightly facilitate the rendering procedure.
source
share