Safari Outline Bug mit :hover

Ich hatte kürzlich den Wunsch, die aktive Zeile einer Tabelle unter dem Mauszeiger beim :hover mit einer Outline deutlicher hervorzuheben. Mein Ziel war es, bei Abstimmungen die relevante Zeile besser anzuzeigen und aller Augenmerk auf die richtigen Daten zu lenken. Das CSS dafür ist im Grunde sehr einfach:

table tbody tr:hover {
    background-color: #48f2;
    outline: 3px solid #48f8;
}

Sowohl in FireFox als auch Chrome hat das auf Anhieb sauber funktioniert.

Leider aber nicht im Safari

Dieser hat die Outline immer wieder seltsam abgeschnitten – so als liegt noch ein anderes verstecktes Element im Bild. Eine Recherche nach dem Problem gestaltete sich schwierig und lieferte keine brauchbaren Ergebnisse. Also wandte ich mich mal wieder StackOverflow zu und verfasste diesen kurzen Beitrag. Der erste Kommentar machte ein wenig Hoffnung, brachte in meinem Fall aber nicht den gewünschten Erfolg.

Und wie es so oft ist… einen Tag später hatte ich noch eine Idee, die dann tatsächlich die Lösung brachte!

/* default state for Safari */
table tbody tr {
    outline: 3px solid #0000;
}
/* highlight table row upon hover */
table tbody tr:hover {
    background-color: #48f2;
    outline: 3px solid #48f8;
}

Es scheint, als “optimiert” Safari sein Rendering durch vorher festgesetzte Clipping Pfade oder ähnliches. Durch das Setzen einer vollständig transparenten Outline als Default konnte ich den Browser jedenfalls dazu bewegen, auch das :hover dann wie gewünscht sauber darzustellen.

Wieder was gelernt…