Screen reader text css issue in iPad

Uh, this one is hard to explain. I have debug it about 5 days. When using assistive text for screen readers we usually do it like this.

`
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
}
`
It works on most cases but I hard weird issue when building social navigation menu. Using iPad or similar touch devices I could scroll left and right and that just didn’t feel right. It must have been bug in my CSS. And it was.

Apparently when using above code for screen readers it still creates “box” and it was “floating” outside my container. And I could therefore scroll left and right with iPad. It took me about five days to find this nasty little bug. Thankfully there is solution. Float the “box” far away from the menu using this CSS.

`
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
top: -9999em;
left: -9999em;
}
`