Published at
Updated at
Reading time

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!

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more WebDev shenanigans. The last edition went out 10 days ago.
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