FirefoxとAndroidでスポイラーのぼかしがうまく機能しない

intfiction.org の Discourse フォーラムでは、パズル要素のあるアドベンチャーゲームについてよく話し合っているので、[spoiler] タグは非常に役立っています。このトピック には、ヒントごとに個別のスポイラータグが多数含まれています。

このページは Google Chrome ではまあまあのパフォーマンスですが、Firefox ではパフォーマンスが悪く、低速な Android スマートフォンでも良好に動作しません。特に Firefox を Android で使用すると、驚くほど遅くなります(少しスクロールして確認してください)。

これはおそらく Firefox の問題です。

それでも、ブラー処理が遅い/不十分なブラウザやプラットフォーム(Firefox や Android など)では、スポイラープラグインがスポイラーテキストを filter: blur(0.5em) ではなく color: black; background: black に設定すべきだと考えます。

「いいね!」 3

この CSS を自分たちで調整する方法はありますか?

「いいね!」 1

CSSを使えば、テキストに合わせた背景色で説明した通りの動作を実現できます。これをテーマコンポーネントに追加すれば、プラグインのCSSを上書きできますが……スプーリア内の画像には適用されません。

この変更はすべてのブラウザで有効になりますが、Firefoxのみを対象とする場合は、JavaScriptでユーザーエージェントを検出する必要があります。

.spoiler-blurred {
  filter: none;
  background: var(--primary); 
  color:  var(--primary);
}

.discourse-no-touch .spoiler-blurred:hover {
  filter: none;
  /* ここで異なるホバー効果を追加することも可能です */
}

.spoiled {
  background: transparent; 
}

Firefoxのパフォーマンスが悪いとのことで残念です。Android版Firefoxは正式にはサポートしていませんが、どうやらすべてのプラットフォームのFirefoxに影響しているようです。filterの代わりに青い色を作るために古い方法であるtext-shadowを使うことを再考すべきかもしれません……

「いいね!」 1

私の Firefox にはもう影響していないようです。

Fenix/Fennec でもベンチマークを取ります。

「いいね!」 4

モッドのアップデートで、「ぼかし付きネタバレ隠し/黒塗りネタバレ隠し」のスタイル選択チェックボックスを追加するのはどうでしょうか?黒塗りなら、テキストをぼかして描画するブラウザのオーバーヘッドを軽減できるかもしれません。

これにより、高速化やモバイル向けに特化したモッドをすべて含めた、特定の「モバイル」テーマを作成することが可能になるはずです。

「いいね!」 1

最新の Firefox for Android でも確実に修正されています!

したがって、https://arewefenixyet.com/ は、この問題が一部の国では既に修正されており、他の地域でも数週間以内に修正される予定であることを示していると言えます。

「いいね!」 5

念のため申し上げますが、macOS Catalina 10.15.5 を搭載した 2019 年製 16 インチ MacBook Pro 上で、Firefox 79.0 のテストページにおいて、遅延するぼかしバグ 925025 が再現します。

Firefox はぼかし処理に 96,141ms を要しますが、Chrome は 9,998ms です。もしかしたら Nightly 版で修正されているかもしれません。

追記:はい、修正されています。81.0a1(2020-08-10)(64 ビット)では、添付ファイルのベンチマークは 10,006ms で完了し、ネタバレでいっぱいの Discourse ページも非常に滑らかにレンダリングされます。

つまり、現時点では何もしずに、Mozilla が修正をリリースするのを待つのが良さそうですね。

ありがとうございます!

「いいね!」 4

実際の修正は、http://arewewebrenderyet.com/ にあるように、現在デフォルトで有効化されつつある WebRender だと思います。

すでに多くのユーザーがいる場所(Windows)では有効になっており、他のプラットフォームでも順次導入されています!また、チームとしては新しい PC で最初に有効にするものでもあります :stuck_out_tongue:

「いいね!」 5