Puedo reproducir este problema. Parece ser un error en R2.
Si se pasa la opción :rtl al compilador, ejecuta el CSS a través de R2, que realiza los cambios mágicos de RTL.
Esto funciona muy bien, pero por alguna razón, parece que estamos encontrando un caso límite donde devuelve CSS desordenado. Utilizamos un patrón para crear un efecto de desvanecimiento en los menús de navegación móviles, que se ve así.
Este no es el único lugar donde lo usamos; es solo un ejemplo.
Parece que este patrón es más de lo que R2 puede manejar. Estamos llamando a una función RGBA y pasando una variable CSS a ella, y luego también añadimos un punto de parada.
Cuando esto se pasa a través de R2, devuelve algo como esto.
Al desactivarlo (incluso en una instancia local RTL), obtenemos esto:
El CSS desordenado confunde al compilador y hace que comprima cualquier CSS que viene después de esa regla en código inútil que nunca se aplica.
Por lo tanto, hay varias hojas de estilo después de esa que nunca se cargan en móviles con RTL. La hoja de estilo de la tarjeta de usuario es una de ellas.
Intenté reducir la complejidad de ese patrón eliminando los puntos de parada, y parece funcionar. Así que pasamos de esto:
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0) 0%,
rgba(var(--secondary-rgb), 1) 100%
);
a esto:
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
Esto no causará ningún cambio visual, ya que esos son los puntos de parada predeterminados de todos modos, y soluciona el problema.
He enviado una PR para actualizar ese patrón en todos los lugares donde lo usamos aquí.
Gracias por reportar el problema @nildarar 