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 12 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.