clip-path in visuallyhidden destroys scrolling performance

[mgol]

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

Bug reports

The visuallyhidden class has started using clip-path since #1920 has landed. Unfortunately, when used inside of a container with overflow: scroll, even with will-change: scroll-position it makes the whole container repainted on every animation frame during the scroll. The old clip property doesn't cause those issues. To reproduce, open the following JS Bin:
http://output.jsbin.com/laxecum
Then open DevTools -> Rendering, enable Paint flashing and start scrolling. The whole view is being continuously repainted.

If you disable the clip-path property of the element with the visuallyhidden class, though, only the scrollbar gets repainted.

Tested on Chrome 64 on macOS. Other browsers don't seem to have this problem.

It seems PR #1920 should be reverted. The old clip property, although deprecated is not likely to disappear from the web any time soon because lots of sites depend on it, e.g. via the visuallyhidden class from older versions of HTML 5 Boilerplate.