La carte utilisateur ne s'ouvre pas sur mobile

Contribuer Bug
1

Après la mise à jour vers la version 2.6.0.beta6 (3e1b94c227), la carte utilisateur ne s’ouvre plus sur mobile. J’ai effectué des tests sur meta et aucun problème n’a été constaté. Peut-être que ce problème est dû au fait que notre Discourse est en RTL.

Nous n’avons aucun problème sur ordinateur de bureau, mais sur mobile, toucher l’image de l’utilisateur n’ouvre pas la carte ; il faut toucher à nouveau pour accéder au profil.

Aucun journal d’erreur n’est enregistré…

J’ai effectué le test avec un modèle par défaut sans aucun composant.

Nous utilisons les plugins suivants :

3 « J'aime »
2

Je ne vois pas les classes suivantes en RTL :

Ce fichier n’aurait-il pas été compilé ? Nous avons effectué la mise à jour via l’interface web.

4

Peu probable, mais possible. Pouvez-vous reconstruire via la console ?

1 « J'aime »
5

Bien sûr, nous avions prévu de le faire demain. Depuis hier, nous avons temporairement ajouté les codes pertinents au thème pour résoudre le problème.

6

Je parviens à reproduire ce problème. Il semble s’agir d’un bug dans R2.

Lorsque l’option :rtl est passée au compilateur, celui-ci exécute le CSS à travers R2, qui applique les transformations magiques pour le RTL.

Cela fonctionne très bien, mais pour une raison inconnue, nous semblons tomber sur un cas limite où R2 renvoie un CSS désordonné. Nous utilisons un motif pour créer un effet de fondu sur les menus de navigation mobiles, qui ressemble à ceci.

Ce n’est pas le seul endroit où nous l’utilisons ; c’est juste un exemple.

Il semble que ce motif dépasse les capacités de R2. Nous appelons une fonction RGBA en lui passant une variable CSS, et nous ajoutons également un arrêt (stop).

Lorsque cela est passé à R2, il renvoie quelque chose comme ceci.

CSS désordonné
CSS désordonné1101×786 278 KB

Avec cette option désactivée (même sur un environnement local en RTL), nous obtenons ceci :

CSS correct

Le CSS désordonné perturbe le compilateur et provoque l’effacement de tout le CSS qui suit cette règle, le rendant inutilisable et inapplicable.

Ainsi, plusieurs feuilles de style situées après celle-ci ne sont jamais chargées sur les versions mobiles en RTL. La feuille de style de la carte utilisateur en fait partie.

J’ai essayé de réduire la complexité de ce motif en supprimant les arrêts, et cela semble fonctionner. Nous passons donc de ceci :

background: linear-gradient(
  to right,
  rgba(var(--secondary-rgb), 0) 0%,
  rgba(var(--secondary-rgb), 1) 100%
);

à ceci :

background: linear-gradient(
  to right,
  rgba(var(--secondary-rgb), 0),
  rgba(var(--secondary-rgb), 1)
);

Cela ne provoquera aucun changement visuel, car ces arrêts sont déjà les valeurs par défaut, et cela résout le problème.

J’ai envoyé une PR pour mettre à jour ce motif partout où nous l’utilisons ici.

Merci d’avoir signalé le problème @nildarar :+1:

7 « J'aime »
7

Wow, votre description était très complète et utile, et le bug était bizarre !

Nous avons déjà rencontré certains des bugs que vous avez mentionnés ci-dessus, mais nous avons essayé de les masquer en surchargeant le CSS.

Merci d’avoir résolu ce problème avec autant de patience et de soin, et merci pour l’explication complète que vous avez rédigée :pray: :slightly_smiling_face:

4 « J'aime »