Abbiamo molti utenti che utilizzano dispositivi Apple e/o browser basati su webkit che segnalano problemi durante lo scorrimento degli argomenti, al punto che il forum diventa inutilizzabile.
Dopo aver scavato parecchio, sembra che la causa più probabile sia come webkit sia… come posso dirlo con garbo… spazzatura nella gestione del ridimensionamento delle immagini.
Tuttavia, ciò ha anche portato a notare come vengono renderizzate le emoji nell’HTML cotto e vorrei un chiarimento perché forse mi sfugge qualche configurazione che avrei potuto fare per evitarlo.
In verde si vede la dimensione originale dell’emoji.
In azzurro/ciano/qualunque sia il colore predefinito, gli attributi aggiunti da Discourse durante la cottura del contenuto.
In rosso il CSS aggiunto dal plugin che ho scritto che:
importa le emoji (sono parecchie)
aggiunge un po’ di CSS personalizzato per farle renderizzare correttamente poiché non sono tutte “20 per 20”
Ora ho eseguito un semplice test. Ho rimosso dal campo cooked nel DB per quell’argomento, tutti i width="20" height="20" e ho chiesto agli utenti di riprovare e visualizzare l’argomento, scorrendo, rispondendo anche se qualcuno sta aggiungendo nuovi post, ma senza usare emoji in modo da non iniettare nuovamente quei due attributi nell’HTML renderizzato delle emoji.
Apparentemente era quello che causava i problemi su webkit poiché tutti i report che ho confermano che ora che quei due attributi sono stati rimossi, non ci sono problemi con lo scorrimento.
Quindi, c’è un modo per impedire a Discourse di aggiungere quei parametri? Perché Discourse presume che ogni emoji sarà “20x20” e, per di più, lo impone tramite attributi HTML invece di usare il CSS?
Sono riuscito a riprodurlo sul mio iPad ma non su Chrome desktop.
Scorro verso l’alto e la timeline torna al post precedente, rendendo difficile scorrere oltre e andare più avanti nella timeline.
Ma ho difficoltà a riprodurlo in modo coerente. Mi sono bloccato al post n. 1955, ma dopo essere riuscito a scorrere oltre, se tornavo indietro e scorrevo di nuovo verso l’alto, non mi bloccava più
Il motivo è che si verifica ogni volta che una nuova emoji viene “caricata pigramente” e gli attributi di dimensione vengono renderizzati.
Una volta renderizzato, il problema non si verifica. Ma se scorri un argomento con molte risposte e in cui le emoji sono usate parecchio, vedrai continuamente questo comportamento e renderà impossibile l’uso di Discourse.
Siamo riusciti a “risolverlo” nel nostro tema personalizzato, ma penso che questo dovrebbe essere affrontato anche nel tema predefinito, o ancora meglio, nella funzione che elabora i post, poiché non vedo un motivo per cui tali attributi HTML relativi alle dimensioni debbano essere applicati invece di utilizzare semplice CSS.
Aggiungo che ogni browser per iOS sembra utilizzare webkit, quindi sarà un problema soprattutto per i dispositivi Apple. Tuttavia, non sono un esperto, quindi prendi questa informazione con le pinze. Sarebbero necessari ulteriori test.
Questo perché tutte le emoji unicode standardizzate sono destinate a rientrare in un quadrato, e presumiamo che i siti vogliano che le loro emoji abbiano dimensioni coerenti in un modo che funzioni insieme al testo e ad altre emoji se quella teiera fosse 50x50 creerebbe un enorme spazio tra le righe come questo:
Quando gli attributi width e height di un’immagine sono inclusi in un elemento HTML <img>, l’aspetto dell’immagine può essere calcolato dal browser prima che l’immagine venga caricata. Questo aspetto viene utilizzato per riservare lo spazio necessario per visualizzare l’immagine, riducendo o addirittura prevenendo uno spostamento del layout quando l’immagine viene scaricata e visualizzata sullo schermo. La riduzione dello spostamento del layout è una componente importante di una buona esperienza utente e delle prestazioni web.
…
Mentre le migliori pratiche degli sviluppatori dell’ultimo decennio potrebbero aver raccomandato di omettere gli attributi width e height di un’immagine su un elemento HTML <img>, a causa della mappatura dell’aspetto, l’inclusione di questi due attributi è considerata una migliore pratica per gli sviluppatori.
Detto tutto questo, hai un esempio ragionevole di un caso in cui il ridimensionamento predefinito non funzionerà per tutte le emoji… quella vecchia emoji del brindisi è 3 volte più larga, quindi non rientra bene in un quadrato. Non è insolito che altre app limitino tutte le emoji a quadrati, quindi non siamo troppo insoliti nel nostro comportamento (sia Slack che Discord lo fanno, per esempio)… ma in alternativa potremmo considerare di consentire alle emoji personalizzate di avere opzionalmente le dimensioni impostate.
Il lavoro più difficile riguarda la parte delle “emoji personalizzate” e il rendering delle emoji:
le emoji personalizzate necessitano di un attributo aggiuntivo per ogni emoji: aspect-ratio (o in alternativa height e width).
il rendering delle emoji deve utilizzare il nuovo attributo aspect-ratio per le emoji personalizzate per variare la width di conseguenza – height rimane a 20px.
Approccio rapido e semplice per le emoji personalizzate:
Per le emoji personalizzate, imposta solo height="20" per i tag img e non impostare affatto width – rinunciando così al vantaggio di impostare aspect-ratio/width e height.
CSS: img.emoji { width: auto; }
se quella teiera fosse 50x50 creerebbe un enorme spazio tra le righe come questo: