GoogleChromeLabs / css-triggers

A reference for the render impact of mutating CSS properties.
https://csstriggers.com/
Apache License 2.0
902 stars 70 forks source link

Mask-*, Clip-* #53

Open Martin-Pitt opened 6 years ago

Martin-Pitt commented 6 years ago

The mask-* and clip-path properties seem to be missing from the list.

cWillow commented 5 years ago

Any plans to add these in the near future? I came looking for mask :D

Jab2870 commented 5 years ago

This would be useful. Does anybody know if clip path cause paint or layout? I would be surprised if it causes layout but does it cause paint? The old Clip property did so should I assume this does?

Martin-Pitt commented 5 years ago

It does cause repaints, tested clip-path with two values of two rectangular shapes in a polygon(…) in Chrome Canary with CSS Transition & and also CSS Animation.

I tested with transition/animation to see if a faster rendering path / off-thread / hardware acceleration would kick in, like it does for filter: blur(…).

(Yep, blurring is hardware accelerated / performant ikel transform, blurring is basically a lot more performant than animating clip-path)