Anatole: Dark theme switching Safari bug

[geoffreywwang]

I've been having issues with the dark theme switching on Safari (everything works fine in Chrome). Here is a video of it. It also seems to happen on the example site on mobile Safari as well.

[geoffreywwang]

I dug into it a little and it seems to be an issue with the fadeInDown class. Removing it in each of the divs gives seemingly desired effects.

[geoffreywwang]

Commit 292a8af seems to be what broke this actually. Specifically, adding background-color: var(--bg-color); to each of the keyframes. While there isn't any more flickering on Chrome, there is also no more animation and the theme instantly changes.

[lxndrblz]

That's good news. Would you mind submitting a PR with the proposed changes?

[geoffreywwang]

I'm sorry, I wasn't very clear in that previous comment. The change in 292a8af didn't actually fix Chrome's issue, it just removed animations (and made it seem like it was fixed). Removing those lines in the CSS fixes Safari but brings back the flickering. I'm looking into fixing animation timings and will submit a PR when I find a solution.

[geoffreywwang]

I created a PR for the fix. The borders do seem to fade weirdly with this new change though. I can't tell if it is the theme itself or a new problem with border animations.

[lxndrblz]

Thanks Geoffrey. I will have a look at your PR and check if there isn't a universal fix (Make it run on Safari without any weird distortions in another browser).

[lxndrblz]

Hey @geoffreywwang , I've reviewed your PR and it looks good to me. I couldn't find any major issue in my testing environment. What did you mean with "fade weirdly"? The only thing I noticed is that they turn black when switching from light to dark mode. Is that what you meant?

[geoffreywwang]

Yeah, for some reason they fade to black before fading to the right color and I can't tell why. Don't know if this is in the scope of this issue, so I just wanted to point it out.

[lxndrblz]

Thanks. I've noticed that too. It looked quite ugly to be honest. Would you mind checking my latest commit to your branch if the weird transition is gone and if site displays properly?