この問題は再現できます。どうやら R2 のバグのようです。
コンパイラに :rtl オプションを渡すと、CSS が R2 を経由して処理され、RTL 向けの魔法のような変換が施されます。
これは通常うまく機能するのですが、何らかの理由で境界ケースに遭遇し、R2 が CSS を無秩序な状態にして返してしまうようです。モバイルナビゲーションメニューのフェード効果を作成するために、以下のようなパターンを使用しています。
これは唯一の箇所ではありませんが、一例です。
どうやらこのパターンは R2 の処理能力を超えているようです。RGBA 関数を呼び出して CSS 変数を渡しており、さらにストップ(色止まり)も追加しています。
これを R2 に通すと、以下のような結果になります。
これをオフにした場合(RTL ローカル環境でも)、以下のような正常な結果になります。
![]()
この無秩序な 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 さん、ありがとうございます ![]()
