Ich kann dieses Problem reproduzieren. Es sieht nach einem Fehler in R2 aus.
Wenn die Option :rtl an den Compiler übergeben wird, führt dieser das CSS durch R2 durch und führt die magischen RTL-Änderungen aus.
Das funktioniert großartig, aber aus irgendeinem Grund scheinen wir einen Randfall zu treffen, bei dem es zu einem durcheinandergeratenen CSS kommt. Wir verwenden ein Muster zum Erstellen eines Fade-Effekts für mobile Navigationsmenüs, das so aussieht:
Dies ist nicht der einzige Ort, an dem wir es verwenden; es ist nur ein Beispiel.
Es scheint, als ob dieses Muster mehr ist, als R2 bewältigen kann. Wir rufen eine RGBA-Funktion auf und übergeben ihr eine CSS-Variable, und fügen dann auch einen Stop hinzu.
Wenn dies durch R2 geleitet wird, erhält man so etwas wie:
Wenn es ausgeschaltet ist (auch auf einem RTL-Lokal), erhalten wir dies:
Das durcheinandergeratene CSS bringt den Compiler durcheinander und veranlasst ihn, jegliches CSS, das nach dieser Regel kommt, zu nutzlosem Code zu quetschen, der nie angewendet wird.
Daher werden mehrere Stylesheets nach diesem einen auf mobilen RTL-Geräten nie geladen. Das Stylesheet für Benutzerkarten ist eines davon.
Ich habe versucht, die Komplexität dieses Musters zu reduzieren, indem ich die Stops entfernt habe, und es scheint zu funktionieren. Also wechseln wir von diesem:
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0) 0%,
rgba(var(--secondary-rgb), 1) 100%
);
zu diesem:
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
Dies wird keine visuellen Änderungen verursachen – da dies ohnehin die Standard-Stops sind – und löst das Problem.
Ich habe eine PR gesendet, um dieses Muster überall dort zu aktualisieren, wo wir es hier verwenden:
Danke für die Meldung des Problems @nildarar 