Hover-Status in der Tabelle mit Grenzverschiebung nur in Firefox

Question

Ich weiß, diese Art von Frage wurde in irgendeiner Form oder Form hier gefragt, aber ich kann das nicht zur Arbeit, egal was. Screenshot inklusive CSS. Wenn Sie die Maus über die Zeile bewegen, wird sie durch den linken Rand hervorgehoben. Es bewegt die Verbindung über 1px. Ich habe versucht, mit negativen Marge zu kompensieren, aber kein Glück (nur um es zu testen). Es ist nur Firefox, wo das passiert.

%zebra-row { 
    transition: background-color .1s ease-out; 
    background-clip:padding-box; 

    &:nth-child(odd) { 
    background-color: $alabaster; 
    } 

    &:hover { 
    background-color: $gallery; 
    border-left:2px solid $aqua-forest; 
    } 
} 

Answer 1

Es ist, weil die Grenze und über bewegt wird, angewendet wird (wie ich bin sicher, dass Sie angenommen haben).

Um dies zu umgehen, sollten Sie einen Standardrahmen haben, aber transparent machen. Beim Hover färben Sie einfach den Rahmen.

%zebra-row { 
    transition: background-color .1s ease-out; 
    background-clip:padding-box; 
    border-left:2px solid transparent; /* Set the transparent border */ 

    &:nth-child(odd) { 
    background-color: $alabaster; 
    } 

    &:hover { 
    background-color: $gallery; 
    border-left-color:$aqua-forest;  /* Color it on hover */ 
    } 
} 

Dies verhindert den "Sprung", über den Sie gesprochen haben, weil die Grenze im Wesentlichen immer da ist.