html - Hover state in table with border shifting link only in Firefox -

i know type of question has been asked in way shape or form on here cannot work no matter what. screenshot included css. when hover on row, left border highlights it. it's moving link on 1px. tried compensating negative margin no luck ( test it). it's firefox happening.

%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;   } }  

it because border being applied , moving on (as i'm sure you've assumed).

to around this, you'll want have default border present make transparent. on hover, you'll color border.

%zebra-row {    transition: background-color .1s ease-out;    background-clip:padding-box;    border-left:2px solid transparent;    /* set transparent border */    &:nth-child(odd ) {     background-color: $alabaster;   }    &:hover {     background-color: $gallery;     border-left-color:$aqua-forest;      /* color on hover */   } }  

this prevents "jump" talking because border is, essentially, there.