Overflow bug with .visually-hidden class

Yesterday, I ran into a weird bug in Chrome and Webkit (but not Firefox) using the .visually-hidden class inside an element that had overflow set to anything other than auto. The visually hidden elements would create a gap at the end of the overflow element, compounding the more of them there were. I wanted to document the details of the bug, and how I fixed it, because I’m sure I’ll run into this again. The .visually-hidden class A .visually-hidden class is used to hide content visually while keeping it accessible to screen readers. The content cannot be visually seen in the UI (just like [hidden] or display: none), but screen readers can see it and will announce the text (unlike those properties). It’s a bit of a hack that works by setting the element size to 1px, giving it a negative margin, clipping it, hiding overflow, and moving it outside the viewport. .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;…