Petit bug amusant sur ZdS

Salut,

Par hasard, je viens de remarquer que si vous positionnez le curseur de la souris très précisément sur la bordure qui sépare la page du menu de droite (petit point rouge sur l’image), alors un bug sauvage apparaît : le cadre qui s’affiche au survol de la souris se met à clignoter assez rapidement

Je me demande d’où cela pourrait venir et si ça porte un nom ce type de bug ?

Je ne sais pas si ça a un nom, mais c’est récurrent sur beaucoup de site, avec chrome/chromium.

Au moment où le tooltip apparaît, le lien n’est plus focus par le curseur, le tooltip disparaît alors, le lien est de nouveau focus, le tooltip réapparaît, etc…

Le bug n’est pas présent sur FF Developer Edition 62.0b19 non plus.

C’est certainement un bug de Chromium / Chrome.

Le responsable c’est que le hover soit sur le lien et non le parent commun au lien et la tooltip (a:focus+.last-answer).

Le fix potentiel serait de remplacer left:100%; par left: calc(100% + 1px);

.main .sidebar ol li a:focus+.last-answer, .main .sidebar ol li a:hover+.last-answer, .main .sidebar ul li a:focus+.last-answer, .main .sidebar ul li a:hover+.last-answer {
    visibility: visible;
    left:100%;
    left: calc(100% + 1px);
    opacity: 1;
    -webkit-transition: visibility 0s linear 0,opacity .15s,left .15s;
    transition: visibility 0s linear 0,opacity .15s,left .15s;
}

Ca se passe ici : https://github.com/zestedesavoir/zds-site/blob/ca158f10bf91b25dcb551d1993ae674858524120/assets/scss/layout/_sidebar.scss#L280

Issue créée sur GitHub : #5020

Je confirme que j’ai eu le bug avec la dernière version de Google Chrome.

Sur Internet Explorer, si on essaye de reproduire le bug, on arrive seulement à focus la case sans être sur le lien.

Le bon fonctionnement du site [ZdS] avec Internet Explorer n’est pas garanti

❤️