Performance issue with clip-path property of .clipped class

[ianmcburnie]

Issue found by @scttdavs (thanks Scott!)

Hi ebayUI Team,

I was looking in our mweb page (new homepage) to see how it performed performance-wise with 6x CPU slowdown. I was glad that most of the page was very smooth with no slowdowns. However, some of our modules have significant jank when horizontally scrolling (about 1-2 FPS). After some digging, I found out that the offending modules used clipped text for accessibility, and when I turn off the ‘clip-path’ attribute from skin’s clipped class in devtools, the jank disappears and it scrolls as smoothly as the rest of the page.

I’ve found with a little research that we aren’t the only ones encountering this problem:
Bug filed: https://bugs.chromium.org/p/chromium/issues/detail?id=611257

Html5-boilerplate and foundation have both removed it in favor of the older and deprecated ‘clip’ since it is unlikely to go away any time soon:
h5bp/html5-boilerplate#2025
foundation/foundation-sites#10914

[ianmcburnie]

Solution: remove clip-path attribute until Chrome issue is fixed. Browser will fallback to clip property. The clip property is deprecated, so we will need to keep a close eye on this situation.

[ianmcburnie]

Thanks @seangates