ダークテーマ下で選択済み投稿のカラーフェードインが不安定

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.

See the video below for a demonstration.

「いいね!」 3

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.

「いいね!」 1

community.wanikani.com (has this issue):

  • 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.

「いいね!」 1

Is this happening on the light theme as well?

「いいね!」 1

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.

「いいね!」 3

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.

「いいね!」 1

Welcome to the cross-browser support hell that we have to work with daily :stuck_out_tongue:

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.

「いいね!」 5

3 ヶ月以上経ちましたので、状況を確認してみました。この問題は Chrome でも発生しており、Firefox でも同様のようです。もしまだ回避策のアイデアがなければ問題ありませんが、念のため思い出させることは悪くないだろうと思いました。

「いいね!」 1

これはダークテーマ固有かつブラウザ固有の問題なので、私にはこれに少しも関心を持つことが難しいです。

Chrome、Edge、Firefox のすべてで発生するなら、本当にブラウザ固有の問題と言えるのでしょうか?それに、ダークテーマを使っている人はたくさんいますよね?

他の人が不満を言っている様子が見当たらないので、いいえ?

Seanは、私たちがホストしているサイトのメンバーです。

これは「有料プレイ」の問題ではなく、特殊なブラウザのバグです。ここではjQueryのハック的なアニメーションではなく、CSSアニメーションを使用しています。このごく小さな外観上の問題には、明らかな解決策はないと思います。

「いいね!」 4

ご心配なく、ただ確認したかっただけです。

「いいね!」 1

もしそれが気になるようでしたら、実際にバグを修正できる人々、つまりブラウザ開発者に報告することをお勧めします。報告用に事前に組み立てられた再現手順がアップストリームに投稿されています。

@seanblue さん、バグ報告に関するこれらのリンクもご覧ください。

Firefox

Bug Writing Guidelines

Bugzilla Main Page

Google Chrome

Report an issue or send feedback on Chrome - Computer - Google Chrome Help

Microsoft Edge

Alt + F > 設定 > 外観 > 「フィードバックを表示」ボタンを有効にする > ブラウザの右上にある「フィードバックを表示」ボタンをクリック > バグを報告

これらの情報が役立てば幸いです! :grin:

「いいね!」 1