Bonjour,
Je rejoins Raphaël : le problème est dans le svg (mais pas que dans le svg).
Il est probable que ce soit dû aux arrondis effectués par les navigateurs. Chrome sur Mac OS dessine l'espace très fin avec une couleur plus claire, Safari le dessine avec une ligne complètement transparente, et Firefox sort un résultat nickel sans espace du tout.
Quand on regarde le svg, on voit que le chemin du path va jusqu'en bordure du bord droit du viewport du svg mais pas au delà (c'est le H214 qui s'y trouve qui nous le dit, 214 correspondant au min-x + width du viewport à savoir 138.7 + 75.3 = 214). Or le svg lui-même est un peu tarabiscoté : le min-x du viewport ne vaut pas 0 (personnellement, je me serais débrouillé pour que ce min-x soit 0). Et ensuite, le svg est en background, lui-même plus ou étiré du fait du css, et de plus se retrouvant dans un :before lui-même plus ou moins étiré. Du coup, le dernier pixel sur le bord droit du svg a selon les navigateurs et les circonstances une couleur plus ou moins claire.
Si on remplace H214 par H215 dans le path du svg, ça semble suffire pour qu'il n'y ait plus cet effet de bord (le path du svg débordant alors du bord droit du viewport). C'est la solution que je retiendrais pour faire au plus court.
Il y a surement d'autres manières de faire, mais une solution via le css me semble en tout cas assez aléatoire (sauf à faire en sorte que le background en css soit décalé vers la droite de 1 pixel). La solution de mettre le height à 299px me semble fonctionner par hasard sous Chrome et Safari (cela change légèrement les proportions et donc les calculs d'arrondis). Si on met le height à 301px, on résout là encore le problème avec Chrome, mais pas avec Safari.
Note : du coup, le css peut être pas mal allégé (beaucoup d'efforts redondants ont été fait pour que le background svg aille jusqu'au bord de son conteneur).
Amicalement,
Modifié par parsimonhi (11 Jan 2018 - 22:52)
