For Hacktoberfest I am currently working on an issue, where I did find the solution itself pretty fast, but stuck with CSS.

I never used Animation in CSS. I never used @support in CSS. Trying to figure out the right way slows the speed pretty down.

Codebase

When looking at the the element, it works as expected in Chrome and Firefox, but not in Safari. Turns out that the cool animation effect which is set via ::before and ::after selector on the component is not supported in Safari (yet).

Changing the background-size to 100% (instead) of 400% on the ::after seems to do the trick.

Solution

I do have a solution but I am not happy yet. I am using userAgent to see if the user is in Safari but this is not recommend.

"Browser identification based on detecting the user agent string is unreliable and is not recommended, [...]."

An idea would be to use the @supports CSS rule, but until now I could not find a correct way to write it that when animation on ::after is not supported then the background-size should be 100%. (or I misunderstood the supports rule)

If nothing works, I will suggest to the maintainers to set the background size to 100% in general, (so the cool effect would not be that enormous anymore), or to leave it and hope that Safari support animation on selectors soon.

I am open for any other ideas 😇

Find the thread about this issue on Twitter

Update

October 28th, 2023
I found a solution to write the support as follows

@supports
selector(:nth-child(1 of x)) {
...
}

But i am wondering if this is good practice 🤔

Resources

https://developer.mozilla.org/en-US/docs/Web/CSS/::after
https://developer.mozilla.org/en-US/docs/Web/API/WorkerNavigator/userAgent

Thanks for your help. I really appreciate it.