DEV Community

Nicholas Stimpson
Nicholas Stimpson

Posted on

2

Is this element visible?

The sample couldn't be much simpler. The question is, is the div element containing the text "Hello World" visible or hidden?

Visible right? Well maybe. jQuery begs to differ!

The problem lies is jQuery's (and widely copied) definition and implementation of its check for visibility. The definition is

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

The implementation is

!! (el.offsetWidth || el.offsetHeight || el.getClientRects().length)

The div in question has a CSS property display value of "contents", which means that it creates no layout box of its own. Its child elements' layout boxes are instead directly connected to its parent layout box. The CSSOM specifications say that offsetWidth, offsetHeight and getClientRects().length must all return zero for such an element

For both offsetWidth and offsetHeight If the element does not have any associated CSS layout box return zero and terminate this algorithm.

for getClientRects() If the element on which it was invoked does not have an associated layout box return an empty DOMRectList object and stop this algorithm.

So in the light of this, what should be done? The intuitive answer clearly doesn't tally with the technical details. And it's not clear to me from a developer perspective whether an element with no layout box really should be considered visible, just because its contents are. Yet from a user perspective it seems obvious that it should. Do we need a third state beyond "visible" and "hidden"?

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (2)

Collapse
 
ahferroin7 profile image
Austin S. Hemmelgarn

I think the answer is that we need a better definition of 'visible' versus 'hidden'.

The problem is, there's no easy definition, because:

  • Elements can have no layout box, but still be rendered (such as your display: contents example).
  • Elements can have a layout box, but not actually show anything (such as an element with opacity: 0).
  • It's technically dependent on the media type and the attributes of the element, not just the styling. An element marked as hidden using ARIA attributes is not 'visible' if a screen reader is being used for example.
Collapse
 
asmani2022 profile image
Asmani2022

Element prototype isVisible = function { return !!( this.offsetWidth || offsetHeight || getClientRects().length (length); };

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay