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

CSS shorthand properties don't initiate `data-css-paint=""` #26

Closed jsnkuhn closed 2 years ago

jsnkuhn commented 2 years ago

In Firefox CSS background shortcut property with more than just a background-image as a value stops data-css-paint="" from injecting to element.

test case codepen: https://codepen.io/jsnkuhn/pen/JjrboWx?editors=0100

jsnkuhn commented 2 years ago

A similar issue occurs with the border-image shorthand vs individual properties in Firefox.

There's a wrinkle with even the long hand properties though where border-image will overwrite the fallback border as intended (in the example below the double, solid, orange lines) but the border-image-source will not render on the element. You can however make the border-image-source appear by tabbing away and then returning to the codepen....

https://codepen.io/jsnkuhn/pen/PoJbWwy?editors=1100

developit commented 2 years ago

@jsnkuhn thanks for the detailed report. It looks like the regular expression that converts paint(xx) wasn't checking for the case where the closing paren is followed by whitespace, only [;,!] characters.

I don't know if this will fix the second issue, however.

jsnkuhn commented 2 years ago

awesome, thanks for taking a look. Not entirely surprising that it wouldn't fix the second thing. That's probably a separate bug. I'll open it up as a different issue so you can close this one without losing track of it.