Julia 👩🏻💻 GDEFor 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.
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.
