search

GoogleChromeLabs / css-paint-polyfill

CSS Custom Paint / Paint Worklet polyfill with special browser optimizations.
https://googlechromelabs.github.io/css-paint-polyfill/
Apache License 2.0
735 stars 21 forks source link

Cancel previous ripple on click #2

Open MattiasBuelens opened 6 years ago

MattiasBuelens commented 6 years ago

Steps to reproduce

  1. Go to the demo page.
  2. Click the big "Click me!" button. The ripple effect starts.
  3. Before the ripple finishes, click the same button again.

Expected results

The current ripple stops and a new ripple starts. After 1 second, the new ripple fills the entire button and then disappears.

Actual results

The current ripple stops and a new ripple starts. However, the new ripple disappears before it fills the entire button. In fact, it disappears when the first ripple would have finished its animation.

Solution

When starting a new ripple effect, cancel any pending previous effect using cancelAnimationFrame. (And add a polyfill for this function if it's not supported natively.)

I also noticed that the requestAnimationFrame "polyfill" was incorrect: the setTimeout call was missing the delay. However, this is still not enough to get the demo working on IE11... 😕

MattiasBuelens commented 6 years ago

Okay, since IE11 does not support CSS custom properties, it'll just remove any property starting with -- (since it doesn't recognize them). As a result, the worklet cannot see those properties... 😞

developit commented 6 years ago

Yes - polyfillng custom properties on IE11 would probably fall into the realm of another polyfill. It should be possible to inject support for them into CSSStyleDeclaration, which would give us style.setProperty() and cssText support. However, it is unlinkely to work with getComputedStyle unless there is some way to hijack other known properties (maybe prefixing with *?).

It's probably my worth mentioning thst without a hack specifically to optimize IE versions, this polyfill might perform poorly there. I had investigated using CSS Behaviors for this, but the fact that it was removed in Edge made it less valuable to me.

MattiasBuelens commented 6 years ago

I agree, it's not very realistic to expect decent performance on IE11 with this polyfill.

I'm not aware of a way to properly polyfill CSS custom properties, where you can introduce any number of variables at any element with the full CSS cascade. Existing "polyfills" such as css-variables-polyfill only work at the :root level and rely on manually parsing the original CSS.