.element-invisible on element at right increases page width to make page scrollable on webkit browsers

Similar to the D8 bug #1973456: .element-invisible on element at right causes horizontal scrollbar on desktop or right gap on phone on webkit browsers but more subtle. Occurs in webkit browsers including Android and iPad Safari.

A read more link has .element-invisible and is often set to float right. The default home page feed /node has such a read more link so is ideal to see the bug.

It's easiest to see the bug in a site with a responsive theme where the page width becomes equal to the screen width on mobile (temporary site with a demo of the bug here). I didn't manage to reproduce it on Bartik.

Navigate to the default feed. The page looks 100% correct (see screenshot ...600.png). However if you drag the page to the right, it will scroll 20-30 pixels (screenshot ...544.png). This shouldn't happen on this sort of responsive theme - and it doesn't when the read more link isn't present.

The patch from the related issue solves this issue too. I didn't take the Bartik lines, just these:

.element-invisible {
width: 1px;
}

.element-invisible.element-focusable:active, .element-invisible.element-focusable:focus {
width: auto;
}