visibility:hidden vs display:none vs opacity:0

Question

I'm currently starting on an animation project. In the project I'll have more than 40000 divs and animate them iteratively. If any of divs 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?

If your animating 40,000 divs your going to have performance issues. Maybe you should look at using canvas/flash. — Undefined, Feb 06 '13 at 14:09
I think it's difficult to code in canvas such an animation because there is no transformation property in canvas. There is no translate, rotate functions in canvas. Or is there? — Cihad Turhan, Feb 06 '13 at 14:13
In SVG, [there is](http://www.w3.org/TR/SVG/coords.html#TransformAttribute) — Fabian Schmengler, Feb 06 '13 at 14:17
Exact duplicate of [Does opacity:0 have exactly the same effect as visibility:hidden](http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden) — givanse, Dec 16 '13 at 19:08
The better option is to generate SVG and then convert it to Canvas and delete old SVG from DOM. This will give you the performance boost. I have tested this with a nice performance boost in. — Shashwat Tripathi, Sep 13 '17 at 10:24
I would prefer WebGL in a large scale animation project like yours. Three.js also has an SVG render as fallback. — atevm, Jan 21 '18 at 13:26

score 345 · Answer 1 · edited Jan 19 '22 at 14:10

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 with opacity: 0; and visibility: 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 have span.hidden { visibility: hidden; display: inline; }).
The "Stacking context" column indicates that any use of opacity (except opacity: 1.0;) will create a new stacking-context, which complicates use of the position 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 raise mouseclick, touchstart, etc - note that the click 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>).
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 uses tabindex).
- Unlike how pointer-events can be disabled in CSS using pointer-events: none;, there is no CSS property to disable keyboard interaction.

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.
Also, don't get confused by the similarly-named backface-visibility and content-visibility properties.
- backface-visibility is only applicable to 3D transform 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.

I should print this table and stick it on the edge of my computer monitor. — , Dec 08 '18 at 09:17
Note that it IS possible to use e.g. jQuery to trigger a click on elements that don't consume click — Bart S, Apr 24 '20 at 11:55

score 18 · Accepted Answer · edited May 23 '17 at 12:26

18

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.

edited May 23 '17 at 12:26

Community

1
1

answered Feb 06 '13 at 14:13

DF_

3,743
25
34

5

The appropriate action would be to mark the question as a duplicate instead of linking to the duplicate's answer. – givanse Dec 16 '13 at 19:10
1

http://www.kaizou.org/2011/06/effectively-measuring-browser-framerate-using-css/ is a 404 and I have edited the answer. Edit accordingly. – Funk Forty Niner Jan 05 '17 at 13:09
fantastic answer!! admire how you answered the question first, then suggested a better approach. – Guy Park Oct 06 '17 at 09:08

score 9 · Answer 3 · edited Feb 20 '19 at 12:12

9

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.

edited Feb 20 '19 at 12:12

Ikhlak S.

8,578
10
57
77

answered Feb 06 '13 at 14:14

score 9 · Answer 4 · edited Feb 18 '22 at 17:19

9

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

edited Feb 18 '22 at 17:19

jedierikb

12,752
22
95
166

answered Oct 21 '16 at 16:39

Elias Bundala

144
1
5

this is the correct answer. Opacity 0 solves most the issues – evanjmg Jun 24 '21 at 16:33
1

why would visibility change trigger a layout ? – gaurav5430 Sep 17 '21 at 19:58
1

@gaurav5430 because of how the particular browser is implemented to know which property change trigger paint/layout/compositing check here https://csstriggers.com/ – Elias Bundala Sep 20 '21 at 08:04
thanks! this is a great resource – gaurav5430 Sep 20 '21 at 15:22

score 7 · Answer 5 · answered Jun 09 '20 at 11:22

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

score 4 · Answer 6 · answered Feb 06 '13 at 14:10

4

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?

answered Feb 06 '13 at 14:10

Fabian Schmengler

24,155
9
79
111

Thanks. But you didn't say anyting about my second question. `how can I measure rendering performance like fps, gpu usage?` – Cihad Turhan Feb 06 '13 at 14:14
That's because I don't have experience with that. But in a quick Google search some browser plugins showed up, did you try any? – Fabian Schmengler Feb 06 '13 at 14:20
3

I found one. Using shift+esc showing up a task manager which shows memory, cpu, fps etc. – Cihad Turhan Feb 06 '13 at 14:22
Ah, I forgot about the Chrome taskmanager. And of course it measures everything :) – Fabian Schmengler Feb 06 '13 at 14:26

score 1 · Answer 7 · answered Jun 05 '18 at 17:20

1

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;

answered Jun 05 '18 at 17:20

atazmin

4,757
1
32
23

score 0 · Answer 8 · edited Jun 20 '21 at 23:53

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.

visibility:hidden vs display:none vs opacity:0

8 Answers8

Linked

Related