Images et boutons flous

[Jellicle]

Détails techniques

Version du forum : phpBB2
Poste occupé : Membre
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : Deux semaines environ je dirais ?
Lien du forum : https://master-poke.forumactif.fr/

Description du problème

Bonjour, je viens vers vous pour un souci qui me rend chèvre depuis quelques jours.

Sur ce forum, dont je suis membre, les images (et les boutons du forum) apparaissent 'aléatoirement' (mais fréquemment quand même) flous.

Exemple, ces stamps qui apparaissent flous :



VS comment ils devraient apparaître :



Je n'ai pas sondé suffisamment les autres membres pour savoir si je suis la seule, mais deux autres ont émis avoir un problème de netteté aussi (dont un sur Safari).

J'ai vérifié énormément de choses :
- j'ai suivi ce tuto : ça change rien
- ça ne vient pas du niveau de zoom, je suis bien à 100% (j'ai coché et décoché "Agrandir uniquement le texte" ça ne change rien)
- ça ne me le fait que sur Firefox et pas sur Chrome
- j'ai désactivé mes extensions Firefox, ça n'a rien changé
- j'ai réinstallé puis réparé Firefox, j'ai tenté en mode de dépannage, j'ai toujours le souci
- ça ne me le fait que sur ce forum

Et après moultes recherches, j'ai zieuté avec l'inspecteur de Firefox et je constate un truc bizarre, quand je joue avec la ligne suivante, ça redevient net :



Mais je ne vois pas bien le rapport vu que ça concerne la police d'écriture principale du forum (il me semble) et que les admins m'indiquent n'avoir rien touché à ce sujet.

Si quelqu'un a une idée... Merci d'avance !

[MattiaDes]

Bonjour, il s'agit malheureusement d'un problème qui se produit avec des images de faible résolution sur des moniteurs dotés d'un affichage rétina.

La meilleure solution serait de remplacer les images par des versions à plus haute résolution ou, pour les icônes, de préférer le format vectoriel.

Pour l'exemple du timbre, cependant, étant donné que j'ai également un forum avec beaucoup d'images « pixelisées », ce CSS peut aider :

Code:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  * {
    -ms-interpolation-mode: bicubic;
    image-rendering: pixelated;
  }
}

Ce CSS ne s'applique qu'aux écrans retina avec un certain DPI. Essayez-le, vous remarquerez certainement des améliorations pour des images telles que les timbres que vous avez montrés.

J'espère qu'à l'avenir, toutes les icônes de l'éditeur seront mises à jour avec des versions vectorielles, qui ne seront alors jamais granuleuses. Par exemple, comme celles de cet éditeur :
https://www.tiny.cloud/docs/tinymce/latest/basic-example/

Désolé si mon français n'est pas parfait, j'espère avoir été utile, car j'ai aussi un PC avec un écran retina et le même problème sur mon forum qui a beaucoup d'images pixellisées

[Jellicle]

Bonjour MattiaDes, merci pour ces éléments de réponse !

Je ne suis pas bien experte mais quand vous parlez de "moniteur dotés d'un affichage rétina" vous voulez dire mon matériel ? Mes écrans ?

J'ai du mal à le croire parce que comme je le dis, dès que je touche cet élément du CSS ça rentre dans l'ordre. Et je n'ai aucun souci sur Chrome par exemple (en utilisant pourtant les mêmes écrans), ni même sur mon forum de test sur lequel je réaffiche les mêmes images pour voir, via Firefox. Quand j'ai cet effet de flou - qui n'est pas systématique mais fréquent -, cela concerne toutes les images de la page (boutons (même ceux de la réponse rapide), avatar du membre, éléments de signature quelle que soit leur taille, etc.) mais pas la bannière du forum, curieusement.

Quand j'essaie d'ajouter ce que vous m'indiquez via l'inspecteur Firefox, je ne vois pas de changement.

Merci en tout cas de votre aide.

[MattiaDes]

Votre problème est donc temporaire ? Parce que sur certains types d'écrans (comme le mien) cela arrive, c'est pourquoi j'ai pensé que c'était dû à cela. Mais sur les écrans où cela se produit, le problème est toujours présent, mais seulement sur certains types d'images comme celles que vous avez montrées dans le sujet.

Lorsque ce problème vous arrive, quelles sont les actions qui le déclenchent et quelles sont celles qui le résolvent ?

Merci pour cette précision

[Jellicle]

Oui c'est pour ça que je ne pense pas que ce soit lié aux écrans.

Action qui déclenche : je vais sur une page du forum (lecture de sujet) et je constate que les image sont floues.

Actions qui "résolvent" : des fois quand je scroll jusqu'en bas du forum j'ai l'impression que ça redevient net (mais ce n'est pas toujours le cas) et sinon, sans être une véritable solution, il y a cette ligne de CSS que je coche via l'inspecteur Firefox, et là ce n'est plus flou. Mais ce que c'est à moi d'agir c'est pas une vraie solution, et si je me trompe pas cet élément du CSS correspond au champ "Police Principale" du panneau d'administration (Affichage > Couleurs & CSS) donc je vois pas bien le rapport ni ce que peuvent faire les admins vu qu'ils n'y ont pas touché et que ce n'est qu'un champ où mettre des noms de polices, il me semble.

[Toryudo]

Bonjour !

Je constate aussi la chose sur Firefox, et à force de regarder, j'ai plusieurs hypothèses...
Déjà, tout dépend de l'endroit de la page qui charge :
- https://master-poke.forumactif.fr/t30465p30-ce-n-est-qu-un-au-revoir#574628 n'est jamais flou
- https://master-poke.forumactif.fr/t30530-recherche-jury-elite-illia-aethelhelm#574939 n'est jamais flou non plus
- par contre, https://master-poke.forumactif.fr/t30530-recherche-jury-elite-illia-aethelhelm#574951 est souvent flou, et si je scroll vers le haut, alors je vois que le post https://master-poke.forumactif.fr/t30530-recherche-jury-elite-illia-aethelhelm#574939 est flou lui aussi

Ça me fait me dire que quelque chose charge mal, ou la page est mal "redessinée" par Firefox à cause d'un élément qui apparait sur les pages (certaines pages je dirais même).

Pour commencer, est-ce que vous pouvez fournir votre Template viewtopic_body ? Dans cette zone, je vois des balises qui s'ouvrent et qui ne se ferment pas, le genre de chose qui peut déranger un navigateur qui ne sait jamais trop comment gérer la chose.

[Jellicle]

Bonsoir Toryudo et merci de vous intéresser à ma demande.
Effectivement c'est "aléatoire" comme souci ce qui rend la chose délicate.

J'ai demandé à un admin la possibilité de récupérer le contenu du template en question. Je reviens vers vous dès que je l'ai.

(j'ai réussi à prouver l'existence du problème à d'autres membres qui passent par Firefox, on est donc bien plusieurs concernés)

[Jellicle]

Sorry pour le double-post, j'ai obtenu le template.
Le fichier est trop lourd pour le joindre au message, j'ai fait un lien Free Transfert.

[Toryudo]

Bonjour !

Alors, une bonne et une mauvaise nouvelle :
- la bonne : ce n'est pas le problème dans votre Template qui provoque le problème
- la mauvaise : j'arrive maintenant à reproduire sur beaucoup d'autre sites (pas que des forums) quand je surfe avec Firefox...

C'est bien une mise à jour de Firefox qui a entrainé ce problème, personne ne pourra rien y faire.
On peut juste espérer que ce soit corrigé avec les prochaines versions !

[Jellicle]

Ah, vous pensez ?

J'étais convaincue que ça pouvait venir du template depuis que j'ai pu le récupérer. J'ai fait des tests sur mon forum de test : avec le template que j'avais jusque-là, je n'avais pas le problème de flou. Quand je le change pour le template récupéré, là j'ai le souci, ça devient flou.

C'est bizarre quand même. Et je ne reproduis pas sur d'autres forums Forumactif.

[Toryudo]

A force de chercher, j'ai une théorie comme quoi ça apparaitrait quand il y a des emojis dans la page concernée et qu'on charge la page à une ancre qui est plus loin/basse que l'emoji, mais c'est difficile à vérifier/confirmer...

Ça peut se confirmer quand je vois ça, même si ce n'est pas exactement le même problème (puisque pour nous, ça le fait sur toutes les images de la page) : https://bugzilla.mozilla.org/show_bug.cgi?id=1912463

[Jellicle]

C'est vrai que ça y fait penser même si je ne saisis pas pourquoi je n'ai pas le problème sur mon forum de test qui a globalement le même design que le forum où me fait cet effet de flou.

Espérons que ce soit corrigé un jour, du coup, et que ça vienne bien de là.
Merci de vous être penché sur le problème

[Jellicle]

Désolée du double-post, avec une autre membre qui a aussi le souci on essaie de creuser et toujours par rapport à ce que j'évoquais côté CSS dans mon premier message, on constate que si avec l'inspecteur on change la police d'écriture présente ici :



Alors, selon la police indiquée, ça peut ne plus être flou. Par exemple, si je mets "Helvetica" c'est net (ou du moins on gagne en netteté). Si je mets "Tahoma" ou "Times", c'est flou. Une idée de pourquoi un lien avec la police d'écriture ? Toujours en lien avec l'histoire des emojis vous pensez ?

[Toryudo]

Bonjour !

En fait, ce n'est pas une question de police, ce serait plutôt une question de "faire une action qui va provoquer une modification sur la page" (parce que les éléments seront plus ou moins grand, donc re-décalent tout sur la page) et donc faire un "repaint" de tous les éléments.

Vous avez parlé de scroll jusqu'en bas du forum pour résoudre parfois le problème : chez moi, si je scroll en haut de la page et que je reviens au niveau du message, alors le flou n'est plus là non plus, et pourtant, je n'ai rien modifié dans la page. Je n'ai rien fait, mais il s'est quand même passé des choses : par exemple, les images qui sont en lazy loading se sont chargées et ont donc provoqué là encore un déplacement de tous les éléments qui sont en dessous d'elles, ce qui a provoqué un "repaint".
Bon, c'est compliqué de dire exactement ce qui résout le problème quand on remonte tout en haut de la page, il faudrait avoir développé pour Firefox pour vraiment en être sûr... mais c'est le constat que je fais.

Voilà un autre site où je vois le problème par exemple (en caché pour ne pas faire de pub) :


Sur ce commentaire, le smiley (une image donc) est flou. Et pourtant, si on remonte tout en haut de la page, puis qu'on redescend, il n'est plus flou. Et ce site-là n'a rien à voir avec les forums, c'est pour ça que ça m'a l'air "général".

Prochaine mise à jour de Firefox le 3 septembre

[Jellicle]

Bien vu, je confirme que ça me le fait aussi sur la page en question au niveau de l'emoji... donc rien à voir avec le template du forum.
Sincèrement, un grand merci pour vos réponses et vos recherches Toryudo. Il nous faut donc prendre notre mal en patience.

Wait & See. Je passe en "résolu" en attendant.