visibility:hidden vs display:none vs opacity:0
JavascriptCssPerformanceAnimationRenderJavascript Problem Overview
I'm currently starting on an animation project. In the project I'll have more than 40000 div
s and animate them iteratively. If any of div
s are in passive state (i.e. it's not animating at least for 2 seconds), I won't display them to increase animation performance.
The question is: which css property is the most suitable for this?
.passive1{
display:none
}
.passive2{
visibility:hidden;
}
.passive3{
opacity:0;
}
And how can I measure rendering performance like fps, gpu usage?
Javascript Solutions
Solution 1 - Javascript
While all 3 properties make an element's box seem invisible, there are crucial differences between them:
Property | Painted | In layout | Stacking context | Pointer events | Keyboard events |
---|---|---|---|---|---|
opacity: 0; |
No | Yes | New | Yes | Yes |
visibility: hidden; |
No | Yes | Varies | No | No |
display: none; |
No | No | Varies | No | No |
- The "Painted" column indicates if the browser will paint the element's background (e.g.
background-image
),#text
content, and so on.- An element cannot be painted without also participating in the page's layout, of course.
- This is No for all 3 properties and values, as the browser won't need to paint the element's box as it's invisible.
- The "In layout" column indicates if the browser will compute the layout and dimensions of the element - along with any of its descendants not excluded from layout.
- This is only No for
display: none;
, as withopacity: 0;
andvisibility: hidden;
the browser will still determine the size of the element so it can correctly layout other elements relative to the current element (e.g. if you havespan.hidden { visibility: hidden; display: inline; }
).
- This is only No for
- The "Stacking context" column indicates that any use of
opacity
(exceptopacity: 1.0;
) will create a new stacking-context, which complicates use of theposition
property. - The "Pointer events" column indicates if the element will respond to user-interaction from a pointing device, such as a mouse, touch-screen, stylus, etc.
- e.g. with
visibility: hidden;
then the:hover
state won't work, and clicking the same element won't apply:focus
or:active
either. - Additionally, the DOM won't raise any pointer events you'd handle in JavaScript (e.g.
visibility: hidden;
won't raisemouseclick
,touchstart
, etc - note that theclick
event can still be raised by certain elements, like<button>
if invoked by the user using a non-pointer input method, such as with keyboard or voice (accessible) navigation means. - You can use
pointer-events: none;
to block pointer events, but this won't block keyboard and other non-pointer input and so should not be used to disable an element because the user can still use the keyboard to interact with it (especially<button>
,<input />
,<select>
, and<textarea>
).
- e.g. with
- The "Keyboard events" column indicates if the element can be interacted-with using keyboard navigation (and possibly other navigation means).
- This includes smart-device (smartphones' and tablets') browsers' "Prev/Next Field" buttons for navigating
<form>
elements (as this usestabindex
). - Unlike how pointer-events can be disabled in CSS using
pointer-events: none;
, there is no CSS property to disable keyboard interaction.
- This includes smart-device (smartphones' and tablets') browsers' "Prev/Next Field" buttons for navigating
This table shows a more complete comparison between the main values of those 3 properties:
Property | Painted | In layout | Stacking context | Pointer events | Keyboard events | Animatable |
---|---|---|---|---|---|---|
Opacity | ||||||
opacity: 0; |
No | Yes | New | Yes | Yes | Yes |
opacity: 0.1; |
Yes | Yes | New | Yes | Yes | Yes |
opacity: 0.9; |
Yes | Yes | New | Yes | Yes | Yes |
opacity: 1; |
Yes | Yes | Varies | Yes | Yes | Yes |
Visibility | ||||||
visibility: hidden; |
No | Yes | Varies | No | No | Yes, with caveats |
visibility: visible; |
Yes | Yes | Varies | Yes | Yes | Yes, with caveats |
Display | ||||||
display: none; |
No | No | Varies | No | No | No |
display: contents; |
Text and children only | Text and children only | Varies | Yes | Yes | No |
Other | ||||||
pointer-events: none; |
N/A | N/A | N/A | No | Yes | No |
-
The "Animatable" column indicates if that property can be used with a CSS transition (
transition:
) or CSS animation (@keyframes
).- Crucially, the
display:
property cannot be animated, which is why we can't use a@keyframes
timeline to completely hide an element after the animation is complete.- But curiously, we can animate the
visibility:
property despite being non-continuous, albeit with caveats.
- But curiously, we can animate the
- Crucially, the
-
Also, don't get confused by the similarly-named
backface-visibility
andcontent-visibility
properties.backface-visibility
is only applicable to 3Dtransform
operations.content-visibility
is an optimization to speed-up page rendering during initial page-load, but requires CSS Containment first, which is out-of-scope for this QA.
Solution 2 - Javascript
The answer found here will answer your first question (most likely display:none
as the space is collapsed completely).
To your second question, tools such as this will probably be useful for you. However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJS library as this handles animations - transformation, rotation, scale, etc.) for you.
Solution 3 - Javascript
Performance will be an issue if display:none or visibility:hidden is used since they trigger paint and layout in most browsers which means your browser will redraw the viewport whenever those two changes so I will recommend opacity but still for that number of divs it will still be not performant as expected you can try webgl using a library called html-gl which render your divs in webgl check https://github.com/PixelsCommander/HTML-GL
Solution 4 - Javascript
display:none
will hide the whole element and remove that from layout space whereas visibility:hidden
hides an element but take up the same space as before.
Opacity can be used if you want to create transparency or fade effect.
Solution 5 - Javascript
Here is a compilation of verified information from the various answers.
Each of these CSS properties is in fact unique. In addition to rendering an element not visible, they have the following additional effect(s):
- Collapses the space that the element would normally occupy
- Responds to events (e.g., click, keypress)
- Participates in the taborder
collapse events taborder opacity: 0 No Yes Yes visibility: hidden No No No visibility: collapse * No No display: none Yes No No
- Yes inside a table element, otherwise No.
got from link
Solution 6 - Javascript
display:none
because the divs are taken out of the flow then, thus their position does not have to be calculated.
That being said, 40000 divs sounds crazy. Did you consider the alternatives like HTML5 canvas or SVG?
Solution 7 - Javascript
Sometime i use visibility and opacity together to achieve effect to avoid click event
e.g.
normal state/element removed from screen:
visibility:hidden;
opacity:0;
transition: all .3s;
hover state/element on screen:
visibility:visible;
opacity:1;
Solution 8 - Javascript
Found this thread whilst investigating a hover: bug in Safari mobile
Confirming that opacity: 0
is a valid approach (it is in my case, thanks all). opacity: 0
fixes it enough to be workable (still requires an annoying js redraw on screen rotate [width change]).
Background info on the bug I fixed with opacity: 0
:
The hover is on a li containing a div that is revealed when hovering (or single touch on mobile) a calendar entry. Really random working/not working in Safari mobile - and even weirder the behavior changes on a screen rotate++ [nb no media queries involved so not that].
So annoying as otherwise works in all other browsers I've tried.