Skip to content

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

@bbthorntz

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions