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

トピックを開くと、現在選択されている投稿が特定の色でフェードインします。ここでは、ダークテーマのメタでは青色で、通常の黒色へとフェードアウトします。最近、この遷移の終盤でスムーズに遷移する代わりに、ジッター(ちらつき)が発生するようになりました。私は最初に community.wanikani.com のダークテーマでこの問題に気づきましたが、ここメタでも同様に発生しています。2台の異なるコンピューターで、Chrome と Edge の両方を使用して確認しました。私が使用している別の Discourse サイトでは、この問題が発生していません。そのサイトは最新バージョンからかなり遅れていると確信しています。ブラウザコンソールからそのサイトのバージョンを確認する方法があれば(また、その情報が役立つ場合)、お知らせください。その情報をここに追加します。

以下の動画でデモンストレーションをご覧ください。

「いいね!」 3

Chrome の場合:サイトの空白部分を右クリックし、「ページのソースを表示」を選択してください。9 行目付近にバージョンとコミット自体が表示されます。両方を共有してください。

「いいね!」 1

community.wanikani.com(この問題が発生しています):

  • Discourse 2.4.0.beta6 - https://github.com/discourse/discourse version 437edfc4157aac4d9a50d911bca550d4425193cf
  • 10 月 28 日のコミット

community.bunpro.jp(この問題は発生していません):

  • Discourse 2.4.0.beta2 - https://github.com/discourse/discourse version 3503758599ae451b962afa4e05c8e88dcb0f021a
  • 8 月 10 日のコミット

私の予想通り、問題が発生していないサイトはかなり古くなっています。参考までに申し上げますと、この問題はここ 1〜2 週間の間に community.wanikani.com で初めて発生したと思われます。私は 1 日に数回このサイトを訪れているので、問題が始まった時点ですぐに気づいただろうと思います。

「いいね!」 1

これはライトテーマでも発生していますか?

「いいね!」 1

Meta のサイト(古いコミットが適用されているもの)でも、この問題を再現できます。\n\nVocabulary within sentences - #2 by seanblue - Bunpro - Bunpro Community でも再現可能です。\n\n「Run」を複数回実行すると、最初の 2 つのボックスでは問題が発生しないことに気づくはずです。\n\n最初のボックスはライトテーマを表しており、問題が発生しません。2 つ目のボックスは比較のために黒い背景を追加したもので、こちらも問題が発生しません。\n\n問題は、デフォルトのダークテーマと同じ色を使用している 3 つ目のボックスで最も顕著に現れます。おそらく、この色の組み合わせがブラウザの何らかの処理を混乱させているのでしょう。私が知っている限り、あらゆるアニメーションの回避策を試しましたが、結果は変わりませんでした。\n\nアニメーションを変更するか、色を変える以外の対応策としては、ブラウザ側からの修正を待つしかありませんが、それがすぐに来るとは限りません。

「いいね!」 3

お伝えした通り、Chrome と Edge の両方で発生しています。Edge はまだ Chromium ベースではないため、レンダリングエンジンが同じだとか、そういうわけではありません。それなのに突然発生し始めたというのが、なぜか不思議な点です。もちろん、Chrome のバグではないかを確認するために Edge も確認しただけですが、Edge ではいつからか発生していた可能性もあり、Chrome でも最近になって導入されたのかもしれません。

また、この現象に気づいたのは、購入から1週間半しか経っていない新しいラップトップででした。そのため、新しいラップトップ固有の問題ではないかを確認するために、2台目のパソコンでも確認しました。ただし、後で古いラップトップを起動して、そこで発生するか確認することもできます。もしかすると、パソコンによって何らかのハードウェア最適化が働いているのかもしれません。

「いいね!」 1

私たちが毎日向き合っている「クロスブラウザ対応の地獄」へようこそ :stuck_out_tongue:

はっきりさせておきますが、これは正当な問題ですので、報告してくださってありがとうございます。修正したい気持ちもありますが、現状ではブラウザの仕様を回避する手段しか選択肢がありません。

アニメーションを変更すると、過去 5 年以上 Discourse を利用しているすべてのユーザーに新しいパターンを強制することになります。ダークテーマの色を変更しても、Discourse を使用しているすべてのサイトに影響が及びます。どちらも検討したい選択肢ではありません。

この問題を改善するためのあらゆる回避策を尽くしたわけではないと言っているわけではありませんが、私が知っている限りの方法では、いまだに改善が見られていません。

とはいえ、後ほど新たな回避策が見つからない限り、とりあえず 3 ヶ月ほど様子を見て、その後改めて検討することをお勧めします。

「いいね!」 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