Is there a unified way to know if a node is visible or not?

Question

Hello guys,

I'd like to be able to know if a node is visible and rendered on screen. As far as I know, there are at least 3 standard and easy ways of making HTML nodes not visible:

• Setting opacity: 0;
• Setting display: none;
• Setting visibility: hidden.

I could check for just these three, but I'm afraid people can get creative when it comes to ways of hiding contents:

• Sending the element offscreen using negative margins;
• Using a width or height of 0 and hiding overflow;
• many more I trust people to have developed.

So I was wondering if there is a standard way of determining if a node is rendered to the screen. I'm pretty sure all major browsers determine it for themselves to accelerate drawing, so maybe it's somehow exposed.

Answer 1

You might try using jQuery's :visible modifier.

http://api.jquery.com/visible-selector/

Unfortunately, I'm fairly sure that doesn't take into account any of the "tricky" cases that you are talking about.

Answer 2

This previous post might be helpful:

http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport

Answer 3

If this is your page, then you can have most of the control and it becomes a matter of applying the standards you implement. If this is a forign page (e.g. if you're writing a bookmarklet), then the number of variables is extremely large.

Visibility means different things to people and browsers. The browser needs to know the context and layout of the page and whether an object takes up space, which is true even in the cases of opacity:0 and visibility:hidden, which would be why jQuery works that way.

So you would need to look at the particular element, including its margins, padding, overflow attributes, visibility, display, all the opacity settings, check for color:rgba(*,*,*,0) too I guess. Then you need to look at every parent object all the way back to the document.