Как исправить обрезанный контур <tr>в Safari?

Question

Я пытаюсь выделить строку таблицы, находящейся в данный момент на контуре. Он работает безупречно в Firefox и Chrome ... но Safari каким-то образом обрезает контур.

1-е изображение показывает Firefox ... 2-е - Safari.

CSS довольно просто:

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

Что может вызвать такое поведение? Это известная ошибка?

PS: скрытие Safari (CMD + Tab) и его повторное отображение без какого-либо движения мыши приводит к правильному отображению <tr> ... поэтому я считаю это ошибкой отображения. Но может быть, есть обходной путь?

Answer 1

Сегодня я попробовал что-то очевидное ... и это сработало:

/* 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;
}

Простая установка прозрачного контура для состояния по умолчанию решила это Safari ошибка. Я предполагаю, что Safari определяет внешние границы во время первоначального рендеринга страницы и использует его для дальнейшей оптимизации рендеринга позже.