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.
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.
Top comments (2)
Silly question: does it need to be the same in all browsers? Animations sound like a classic example of progressive enhancement (which should be under some sort of prefers-reduced-motion clause anyway). If there's no specific criteria for it to be animated, make it look nice static and don't worry about browsers that don't support more. If and when Safari catches up, it'll start working.
Thank you for your comment, @moopet !
Sorry if I get your question wrong. No, it does not have to be the same in all browsers, that’s why I am looking for a solution on how to make it different in Safari!
The original code used prefers-reduced-motion. The sole focus of this codebase is to generate different output in different browsers.