When you open a topic, the currently selected post fades in a certain color. Here on meta for dark theme, it’s a blue color, fading to the normal black. Recently this started getting jittery towards the end of the transition, instead of transitioning smoothly. I first noticed this on community.wanikani.com’s dark theme, but it’s happening here on meta as well. I’ve seen this using both Chrome and Edge across two different computers. Another Discourse site I use, which I’m fairly certain is quite a bit behind latest, does not exhibit this problem. If there’s a way for me to check the version of that site from the browser console (and if that information would be useful) let me know and I’ll add that information here.
From Chrome: Right click a blank part the site, select view page source. Around line 9 you’ll see the version, as well as the commit itself. Please share both.
Discourse 2.4.0.beta6 - https://github.com/discourse/discourse version 437edfc4157aac4d9a50d911bca550d4425193cf
Commit from October 28th
community.bunpro.jp: (does not have this issue):
Discourse 2.4.0.beta2 - https://github.com/discourse/discourse version 3503758599ae451b962afa4e05c8e88dcb0f021a
Commit from August 10th
As I thought, the site not exhibiting the issue is pretty out of date. For what it’s worth, I think this issue appeared only in the last week or two on community.wanikani.com. I visit there several times a day, so I would have noticed it as soon as it started happening.
I can reproduce the issue here on Meta as well on the site that’s on an older commit
I’m pretty sure this is not our bug, I can reproduce it in a fiddle
If you hit run multiple times you’ll notice that the first and second box don’t have the issue.
The first box represents the light theme. it does not have the issue. The second one is one I added a black background to for comparison. It also does not have the issue.
The issue is most noticeable in the third box, which uses the same colors as the default dark theme. I think the color combination is tripping the browser here somehow. I’ve tried all the animation hacks that I’m aware of and the result was still the same.
Short of changing our animation or using different colors, I’m not sure what we can do here other than wait for a fix from the browser, which might not happen any time soon.
As I mentioned, it’s happening on both Chrome and Edge. Edge is still pre-chromium, so it’s not like they’re using the same rendering engine or anything. That’s what makes it so strange that it just started happening. Granted I only checked Edge to try to confirm that it wasn’t a Chrome bug. It’s entirely possible that it’s been happening on Edge for who knows how long, and it was only recently introduced in Chrome as well.
I also noticed this for the first time on my new laptop, which I’ve only had for a week and a half. That’s why I also verified the issue on a second computer, to rule out it being specific to my new computer. But I can boot up my old laptop later to see if it happens there. Maybe there’s some kind of hardware optimization going on depending on the computer.
Welcome to the cross-browser support hell that we have to work with daily
To be clear, this is a valid issue so thanks for posting it. I’d love to fix it, the issue here is that our options are limited to working around browser issues.
Changing the animation would introduce a new pattern to everyone that’s been using Discourse for the last 5+ years. Changing the colors in the dark theme would also affect all the sites that use Discourse. Neither of those are options that I want to entertain.
I’m not saying that I’ve exhausted all the hacks that might improve this, but all the ones I know have not made any difference.
That said, and short of any hacks that I might discover later, I’d say let’s wait this out for, say, 3 months and revisit then.
It’s been over three months, so I figured I’d check in. The issue still happens in Chrome, and it seems to happen in Firefox as well. If you still don’t have any ideas for workarounds then no big deal, but I figured a reminder couldn’t hurt.
This is not a matter of “pay to play”, it is an obscure browser bug. We are using a CSS animation here, not some jQuery hack animation, I don’t think there is any obvious fix to this very minor cosmetic issue.
If you are concerned about it, I suggest reporting it to the people that can actually fix the bug – the browser developers. There is a repro posted upstream pre-assembled for your reporting pleasures.
Alt + F > Settings > Appearance > Enable the “show feedback” button > Click on the “show feedback” button near the top right of the browser > Report the bug
