Consegui reproduzir esse problema. Parece ser um bug no R2.
Se a opção :rtl for passada para o compilador, ele executa o CSS através do R2 e aplica as mágicas de mudança para RTL.
Isso funciona muito bem, mas, por algum motivo, parece que estamos encontrando um caso de borda onde ele retorna CSS embaralhado. Usamos um padrão para criar um efeito de fade para menus de navegação mobile, que se parece com isso.
Este não é o único lugar onde o usamos; é apenas um exemplo.
Parece que esse padrão é mais do que o R2 consegue lidar. Estamos chamando uma função RGBA e passando uma variável CSS para ela, e também adicionamos um ponto de parada (stop).
Quando isso é passado pelo R2, ele retorna algo assim.
Com ele desativado (mesmo em um ambiente local RTL), obtemos isso:
O CSS embaralhado confunde o compilador e faz com que ele comprima qualquer CSS que venha após aquela regra em código inútil que nunca é aplicado.
Portanto, existem vários folhas de estilo após essa que nunca são carregadas no mobile RTL. A folha de estilo do cartão do usuário é uma delas.
Tentei reduzir a complexidade desse padrão removendo os pontos de parada, e parece que funciona. Então, passamos disso:
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0) 0%,
rgba(var(--secondary-rgb), 1) 100%
);
para isso:
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
Isso não causará nenhuma mudança visual — já que esses são os pontos de parada padrão de qualquer forma — e resolve o problema.
Enviei um PR para atualizar esse padrão em todos os lugares onde o usamos aqui.
Obrigado por relatar o problema @nildarar 