To close off, here’s a demo on @codepen for you to...

Bramus's posts Post Back to profile

Top-level

Bramus

To close off, here’s a demo on @codepen for you to play with. Enjoy!

https://codepen.io/bramus/pen/WNqKqxj?editors=1111

Like 29 August at 20:11 | Open on front-end.social

3 comments

Bramus

UPDATE: Jake found a workaround to bypass that Chrome bug: register the custom property with @property.

That works.

But

…

Safari doesn’t like it. It seems to be stuck in a transition loop when the custom props is registered to contain string values ("<string>" or "*") 😕

30 August at 9:02 | Open on front-end.social

Bramus

Here’s something nice by @matthewp built on top of all this: a Selector Matcher Observer powered by CSSStyleObserver.

When the element matches the given selector, a custom property gets flipped, triggering the callback attached to the CSSStyleObserver.

https://codepen.io/bramus/pen/zYVJBje

30 August at 13:38 | Open on front-end.social

Bramus

Yesterday I collected all bugs I could find related to `transition-behavior: allow-discrete` onto a dedicated repo/site [^1] and also filed a bunch bugs.

The WebKit team at Apple didn’t waste any time and moved really fast on this one, as the PR to fix the WebKit bugs [^2] is already merged in! 🤩👏

[^1]: https://allow-discrete-bugs.netlify.app/
[^2]: https://github.com/WebKit/WebKit/pull/33061

3 September at 18:34 | Open on front-end.social

Go Up