Why do visually hidden CSS classes define a size of 1x1?

Written by Stefan Judis
Published at
Updated at
Reading time
1min

Did you ever wonder why visually-hidden or sr-only classes have the dimensions of 1 by 1 pixel?

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  /* Why this 👇? */
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

Well, Manuel Matuzović investigated this topic and it's because of Safari. Safari isn't able to focus zero-size elements.

That's a nice little fun fact! 😅 Thanks Manuel!

If you enjoyed this article...

Join 6.1k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles