Riesco a riprodurre questo problema. Sembra un bug in R2.
Se l’opzione :rtl viene passata al compilatore, il CSS viene elaborato da R2, che applica le trasformazioni magiche per il layout da destra a sinistra.
Questo funziona benissimo, ma per qualche motivo sembra che stiamo incappando in un caso limite in cui R2 restituisce CSS disordinato. Utilizziamo un pattern per creare un effetto dissolvenza per i menu di navigazione mobile, che appare così.
Questo non è l’unico posto in cui lo usiamo; è solo un esempio.
Sembra che questo pattern sia troppo complesso per R2. Stiamo chiamando una funzione RGBA e passando una variabile CSS, e aggiungiamo anche degli stop.
Quando questo viene elaborato da R2, restituisce qualcosa di simile a questo.
Con l’opzione disattivata (anche in un ambiente locale RTL), otteniamo questo.
Il CSS disordinato confonde il compilatore e causa la compressione di qualsiasi CSS successivo a quella regola in codice inutile che non viene mai applicato.
Quindi, ci sono diversi fogli di stile successivi a quello che non vengono mai caricati su mobile in modalità RTL. Uno di questi è il foglio di stile della scheda utente.
Ho provato a ridurre la complessità di quel pattern rimuovendo gli stop, e sembra funzionare. Quindi passiamo da questo.
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0) 0%,
rgba(var(--secondary-rgb), 1) 100%
);
a questo
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
Questo non causerà alcun cambiamento visivo, dato che quegli stop sono quelli predefiniti, e risolve il problema.
Ho inviato una PR per aggiornare quel pattern ovunque lo utilizziamo qui.
Grazie per aver segnalato il problema @nildarar 