The .sr-only utility class causes browser repaints in overflowing divs

[bbthorntz]

After much research to removing scroll lag from our app, I discovered that elements with the .sr-only class cause repaints when scrolling in overflowing divs.

Browser: Chrome
Operating System: Mac OSX Sierra

Please see the reduced test case here:
https://codepen.io/bbthorntz/pen/pdxLzd

In Chrome, with 'Inspector -> Rendering -> Paint Flashing' enabled, you can see that the presence of the element with the .sr-only class causes paint flashing. If you remove this element, the paint flashing stops.

Removing the clip-path property from the class appears to fix the issue.

I have yet to test whether this affects other browsers/operating systems.

[gstreetmedia]

I can confirm that this causes the same issue on Windows & Android Chrome. Android has probably the biggest impact as it makes scrolling almost unusable.

[XhmikosR]

@mdo: thoughts how to proceed?

Also, has anyone filed a bug report in Chromium?

[mdo]

@XhmikosR Updating the class to remove the clip-path is probably best way forward. Chrome bug would be great, too.

[XhmikosR]

@mdo: do you think you could have this sorted for the stable?

I'm not familiar with the current clip-path approach, so I don't know if just removing it is good.