モバイルでユーザーカードが開きません

2.6.0.beta6 (3e1b94c227) にアップデート後、モバイル端末でユーザーカードが開かなくなりました。Meta でテストしたところ問題はありませんでした。おそらく、Discourse が RTL 設定であることが原因でこの問題が発生しているのでしょう。

デスクトップでは問題ありませんが、モバイル端末ではユーザーの画像をタップしてもカードが開かず、再度タップするとプロフィール画面に移動してしまいます。

エラーログも存在しません。

コンポーネントを一切含まないデフォルトのテンプレートでテストを行いました。

現在使用しているプラグインは以下の通りです:

「いいね!」 3

以下のクラスが RTL で表示されません:

このファイルがコンパイルされていないのでしょうか?ウェブインターフェースを通じて更新を行ったためです。

可能性は低いですが、あり得ます。コンソールから再構築できますか?

「いいね!」 1

はい、明日それを行う予定でした。問題解決のため、昨日から一時的にテーマに関連するコードを追加しました。

この問題は再現できます。どうやら R2 のバグのようです。

コンパイラに :rtl オプションを渡すと、CSS が R2 を経由して処理され、RTL 向けの魔法のような変換が施されます。

これは通常うまく機能するのですが、何らかの理由で境界ケースに遭遇し、R2 が CSS を無秩序な状態にして返してしまうようです。モバイルナビゲーションメニューのフェード効果を作成するために、以下のようなパターンを使用しています。

これは唯一の箇所ではありませんが、一例です。

どうやらこのパターンは R2 の処理能力を超えているようです。RGBA 関数を呼び出して CSS 変数を渡しており、さらにストップ(色止まり)も追加しています。

これを R2 に通すと、以下のような結果になります。

これをオフにした場合(RTL ローカル環境でも)、以下のような正常な結果になります。

correct css

この無秩序な CSS がコンパイラを混乱させ、そのルール以降のすべての CSS を無効なコードに圧縮してしまい、適用されなくなります。

そのため、そのスタイルシートの後に続く複数のスタイルシートが、モバイル RTL 環境では読み込まれなくなります。ユーザーカードのスタイルシートもその一つです。

パターンを単純化するためにストップを削除してみたところ、問題が解決したようです。つまり、以下のような状態から

background: linear-gradient(
  to right,
  rgba(var(--secondary-rgb), 0) 0%,
  rgba(var(--secondary-rgb), 1) 100%
);

以下のように変更しました。

background: linear-gradient(
  to right,
  rgba(var(--secondary-rgb), 0),
  rgba(var(--secondary-rgb), 1)
);

これにより視覚的な変化は生じません(これらはデフォルトのストップだからです)が、問題が解決します。

このパターンを全箇所から更新する PR を送信しました。

問題を報告してくださった @nildarar さん、ありがとうございます :+1:

「いいね!」 7

素晴らしい、あなたの説明は非常に詳細で役立ちましたし、そのバグも奇妙でしたね!

上記で言及されたバグのいくつかは以前も目にしたことがありますが、CSSを上書きすることで隠すようにしていました。

この問題をこれほど忍耐強く、慎重に解決してくださり、また詳しく解説してくださったことに心から感謝しています :pray: :slightly_smiling_face:

「いいね!」 4