Le floutage de spoiler fonctionne mal dans Firefox et Android

[dfabulich (Dan Fabulich)]

Sur le forum Discourse d’intfiction.org, nous parlons beaucoup de jeux d’aventure à énigmes, c’est pourquoi la balise [spoiler] est très utile. Dans ce sujet, il y a des tonnes de balises spoiler distinctes, une pour chaque indice.

Cette page fonctionne à peu près correctement sur Google Chrome, mais elle fonctionne mal sur Firefox, et elle ne fonctionne pas bien non plus sur les téléphones Android lents. C’est extrêmement lent sur Firefox sur Android. (Faites défiler un peu vers le bas pour voir ce que je veux dire.)

C’est probablement la faute de Firefox.

925025 - CSS blur filter is order of magnitude slower than Chrome

Néanmoins, je pense que le plugin spoiler devrait définir le texte des spoilers pour utiliser color: black; background: black au lieu de filter: blur(0.5em) sur les navigateurs/plateformes qui gèrent le flou lentement ou mal (Firefox, Android).

[dfabulich (Dan Fabulich)]

Existe-t-il un moyen de modifier ce CSS nous-mêmes ?

[awesomerobot (Kris)]

Avec CSS, cela devrait obtenir ce que vous avez décrit avec un arrière-plan correspondant au texte. L’ajout de ceci à un composant de thème devrait remplacer le CSS du plugin… bien que cela ne fonctionnerait pas pour les images dans les spoilers.

Cela appliquerait le changement dans tous les navigateurs ; vous devriez détecter l’agent utilisateur en JS si vous ne souhaitez cibler que Firefox.

.spoiler-blurred {
  filter: none;
  background: var(--primary); 
  color:  var(--primary);
}

.discourse-no-touch .spoiler-blurred:hover {
  filter: none;
  /* vous pourriez ajouter un effet de survol différent ici */
}

.spoiled {
  background: transparent; 
}

C’est dommage d’entendre parler des mauvaises performances de Firefox. Nous ne prenons pas officiellement en charge Firefox sur Android, mais il semble que cela affecte Firefox partout. Peut-être devrions-nous envisager de revenir à notre ancienne méthode consistant à utiliser une text-shadow pour créer le bleu au lieu de filter…

[Falco]

@awesomerobot

Il semble que cela affecte Firefox partout.

Cela ne semble plus affecter mon Firefox.

Je vais également effectuer des tests de référence sur Fenix/Fennec.

Test for bug 925025

[Hanon_Ondricek]

Que diriez-vous d’une mise à jour du mod pour ajouter une case à cocher de style pour « flouter les spoilers / masquer les spoilers » ? Masquer les spoilers consisterait à couvrir le texte des spoilers d’une barre noire, ce qui pourrait épargner au navigateur la surcharge liée au rendu du texte flouté.

Cela rendrait au moins possible la création d’un thème spécifique « mobile » qui pourrait intégrer tous les mods plus rapides et spécifiques aux appareils mobiles.

[Falco]

C’est également résolu dans la dernière version de Firefox pour Android !

Firefox Fennec	Chrome	Firefox Fenix
52k	10k	10k

Je dirais donc que https://arewefenixyet.com/ indique que cela est résolu dans certains pays, et que cela arrivera ailleurs dans quelques semaines à peine.

[dfabulich (Dan Fabulich)]

Pour être clair, je reproduis le bug de flou lent 925025 sur cette page de test dans Firefox 79.0 pour macOS Catalina 10.15.5 sur un MacBook Pro 16" de 2019.

Firefox met 96 141 ms pour une exécution de flou ; Chrome met 9 998 ms. Peut-être que cela est corrigé dans la version nightly ?

EDIT : Oui, c’est le cas. Sur 81.0a1 (2020-08-10) (64 bits), le benchmark de pièce jointe prend 10 006 ms et la page Discourse pleine de spoilers s’affiche de manière très fluide.

Il semble donc que nous devrions peut-être ne rien faire pour le moment et simplement attendre que Mozilla déploie ses correctifs.

Merci !

[Falco]

Je pense que la vraie correction est WebRender, qui est actuellement activé par défaut selon http://arewewebrenderyet.com/.

Il est déjà activé là où se trouvent la plupart des utilisateurs (Windows) et sera bientôt disponible ailleurs ! C’est aussi la première chose à activer sur un nouveau PC pour notre équipe .