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

Question

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.