Cartão do usuário não abre no celular

Contribuir Bug
1

Após atualizar para a versão 2.6.0.beta6 (3e1b94c227), o cartão do usuário não abre no dispositivo móvel. Testei no meta e não houve problema. Talvez por nosso Discourse ser RTL, esse problema tenha ocorrido.

Não temos problema no desktop, mas no celular, ao tocar na imagem do usuário, o cartão não abre; ao tocar novamente, entramos no perfil.

Não há registro de erro…

Fiz o teste com um modelo padrão sem nenhum componente.

Estamos usando os seguintes plugins:

3 curtidas
2

Não consigo ver as seguintes classes em RTL:

Será que esse arquivo não foi compilado? Fizemos a atualização por meio da interface web.

4

Improvável, mas possível. Você pode reconstruir via console?

1 curtida
5

Claro, planeávamos fazer isso amanhã. Desde ontem, adicionamos temporariamente os códigos relevantes ao tema para resolver o problema.

6

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.

CSS embaralhado
CSS embaralhado1101×786 278 KB

Com ele desativado (mesmo em um ambiente local RTL), obtemos isso:

CSS correto

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 :+1:

7 curtidas
7

Uau, sua descrição foi muito completa e útil, e o bug foi bizarro!

Já havíamos visto alguns dos bugs que você mencionou acima, mas tentamos escondê-los sobrescrevendo o CSS.

Obrigado por resolver esse problema com tanta paciência e cuidado, e obrigado pela explicação completa que você escreveu :pray: :slightly_smiling_face:

4 curtidas