Bug SVG

[Kaitos]

Bonsoir à tous,

Je rencontre actuellement un problème de rendu SVG sur mon jeu.
Je ne sais pas exactement d'où provient le bug...

J'ai réalisé une capture vidéo pour exposer ce problème, celle-ci est téléchargeable via le lien suivant :
https://ufile.io/w76fo

Pour information :
- Je suis sous google Chrome
- J'utilise snap.svg.
- Le bug n’apparaît que lorsque j'utilise la propriété css suivante sur mes images : image-rendering: pixelated; (Si je n'utilise pas cette propriété, le rendu est flou sur le navigateur)
- Le bug apparaît au survol de mes objets svg (et pas juste lorsque le curseur survole les polygones triangulaires bleus)

Voila, si vous avez rencontré un problème similaire ou que vous avez une petite idée, n’hésitez pas !

Merci beaucoup!

[Kaitos]

Bonsoir à tous,

Je reviens vers vous car je n'ai pas à trouver de solution à mon problème SVG sur Google Chrome :

- Avec la propriété CSS suivantes pour les images: image-rendering: -webkit-optimize-contrast;
Le rendu est flou.
- Si je choisis la propriété: image-rendering: pixelated;
Le rendu est beaucoup plus net (ce que je recherche), mais les images buguent au survol des éléments graphiques.

Voici les logins du jeu :

Site : https://www.arx-tholus.fr/
Login : test@arxtholus.fr
Password: test

Et l'écran où trouver le bug en question :
combattant 1
combattant 2
combattant 3

Pour faire apparaître le bug:
- Ajouter le CSS suivant dans le navigateur:

Code :

image {
   image-rendering: pixelated !important;
}

- Déplacer le curseur sur les différents combattants

Voila, donc si il y a des personnes maîtrisant le SVG et ayant un peu de temps pour m'aider... n’hésitez surtout pas !

Merci,

Kaitos.

[Xenos]

A mon avis, tu peux le remonter à Webkit, avec un exemple moins touffu type (1 page avec 1 SVG dedans, son CSS embarqué, 1 image)*2 pour avoir 1 exemple pixelated et 1 exemple non pixelated.

Mais à mon avis, ton problème vient du "filter" qui est modifié à la volée, entrainant un redessinage de la zone qui n'est pas exactement le même que le redessinage général du SVG quand "pixelated" est utilisé. Vire tes trucs qui changent dynamiquement le DOM et ça devrait passer. Si t'as besoin d'effets à la volée, fais-le en CSS (image:hover { filter: url('#mesgenoux'); }). Si même ainsi, le problème persiste, alors tu pourras ouvrir le ticket chez webkit (s'il n'existe pas déjà).

[Kaitos]

Qu'entends tu par "ton problème vient du "filter" qui est modifié à la volée" ?
Lorsque l'on déplace le combattant (en cliquant sur une case adjacente), le bug survient aussi, alors que je fais simplement des "animate transform" sur mes éléments.

[Xenos]

Je n'ai pas regardé le fond du code pour le 2e exemple de déplacement, mais dans cet exemple, est-ce que tu rajoutes/enlève des attributs SVG? Car dans le cas du filter, c'est ce qui se passe (un attribut SVG "filter" est rajouté sur l'élément SVG survolé, ce qui peut entraîner un recalcul de tout le SVG au lieu de juste re-render les pixels de la zone impactée).

Après, à mon avis, c'est un défaut de webkit, faudrait faire un exemple simple avec le moins d'éléments et de code possible, qui reproduise le bug.

Sinon, le plus simple, c'est de ne pas faire du "webkit pxielated", et de juste agrandir ton image dans photoshop pour avoir le rendu de sprite qui te plait...

[Kaitos]

C'est bon j'ai enfin trouvé la solution à mon problème. C'était dû à l'utilisation de knacss (https://www.knacss.com/).
knacss surchargeait nativement sur le navigateur, ce n'était donc pas visible...

Merci pour ton aide tout de même !

[Xenos]

Welcome

Je dirai bien "raison de plus pour bannir ce genre de saloperie inutile", mais on va me traiter de nazi du standard... :/