Tableaux : des bordures disparaissent lorsque le navigateur a un zoom autre que 100%

[colinux]

Décrire le bug

Les bordures disparaissent, (ou s'épaississent) aléatoirement lorsque le navigateur est réglé sur un zoom personnalisé (autre que 100%).

Les étapes pour reproduire le bug

1. Ouvrir la page des exemples des tableaux dans le package
2. Zoom ou dézoomer, quel que soit le navigateur (Chrome moins concerné, en tout cas sous OSX)

Plus le tableau a de cellules plus il y a de chances que le problème apparaisse, surtout si on ajoute des bordures verticales sur les tableaux complexes.

Comportement attendu

Des bordures consistentes.

Capture d’écran

zoom 90% :

zoom 110%: (ouvrir le screenshot pour voir en taille réelle)

Plus on zoom ou dézoom plus c'est marqué.

Configuration et système utilisé

• Version du DSFR : 1.12.1
• Appareil (mobile, tablette, desktop) : tous
• Système d’exploitation : tous*
• Navigateur et version : de nombreux instructeurs nous remontent ça avec firefox (windows), mais on reproduit aussi safari, firefox OSX, Chrome sur un écran non retina

Informations complémentaires

Les bordures sont déclarées en tant que background de 1px.
L'hypothèse c'est que dans le cadre d'un zoom le navigateur recalcule chaque épaisseur, et il y a des seuils dans lesquels 1px devient 0px ou 2+px.

Nous sommes en train de tester des solutions (provisoires) à base de calculs en fonction du devicePixelRatio, pas très satisfaisant pour le moment. Je reviendrais poster ici un truc si on trouve.

En quelques heures nous (Démarches Simplifiées) avons eu beaucoup de retours de services instructeurs à ce sujet. On est preneurs d'idées pour contourner le problème en attendant une future release corrective plus tard !

[keryanS]

Bonjour,

Nous sommes au courant de problèmes liés au subpixel rendering sur plusieurs composants.
Nous utilisons les propriétés background-image et box-shadow plutôt que 'border', car celles-ci ne rajoutent pas d'épaisseur, ce qui nous permet de rester en base 4px partout. Malheureusement, le rendu de ces propriétés dessinées par les navigateurs est effectivement assez aléatoire lorsqu'un zoom entre en jeu.
C'est un problème connu qui dépend de l'écran et de l'OS/navigateur.

En v2 nous réfléchirons à un autre paradygme pour gérer ces bordures d'1px.

Preneur de vos retours sur vos tests effectués.

Keryan, pour l'équipe DSFR