La scheda utente non si apre sul cellulare

Contribuisci Bug
1

Dopo l’aggiornamento alla versione 2.6.0.beta6 (3e1b94c227), la scheda utente non si apre su mobile. Ho effettuato dei test su meta e non ho riscontrato problemi. Forse, dato che il nostro Discourse è in RTL, questo problema si è verificato.

Non abbiamo problemi su desktop, ma su smartphone, toccando l’immagine dell’utente la scheda non si apre; invece, toccando una seconda volta, si accede al profilo.

Non ci sono log di errore…

Ho eseguito il test con un template predefinito senza componenti aggiuntivi.

Stiamo utilizzando questi plugin:

3 Mi Piace
2

Non riesco a vedere le seguenti classi in RTL:

Potrebbe essere che questo file non sia stato compilato? Poiché abbiamo eseguito l’aggiornamento tramite l’interfaccia web.

4

Improbabile, ma possibile. Puoi ricostruire tramite la console?

1 Mi Piace
5

Certo, avevamo pianificato di farlo domani. Da ieri, abbiamo temporaneamente aggiunto i codici pertinenti al tema per risolvere il problema.

6

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.

jumbled CSS
jumbled CSS1101×786 278 KB

Con l’opzione disattivata (anche in un ambiente locale RTL), otteniamo questo.

correct css

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

7 Mi Piace
7

Wow, la tua descrizione era molto completa e utile, e il bug era bizzarro!

Abbiamo visto alcuni dei bug che hai menzionato sopra in precedenza, ma abbiamo cercato di nasconderli sovrascrivendo il CSS.

Grazie per aver risolto questo problema con tanta pazienza e attenzione, e grazie per la spiegazione completa che hai scritto :pray: :slightly_smiling_face:

4 Mi Piace