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

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!