css gives weird artefacts when using element with :hover - css

Question

I have css :hover element (table row) which behaves weirdly. On some machines it gives pixel artefacts which disappear by itself or when hover over and out again. Sometimes it's a whole line, sometimes just a fragment of it. On some machines including my own (same browser versions) I can't get the same behavior, which makes it very hard to test and fix.
Got the issues in Chrome (52.0.2743.116), Opera (39.0.2256.48), Firefox (48.0). Haven't managed to reproduce in Edge (25.10586) and IE (11.494).
Snippet (couldn't make it work, link below has a working example):
.table {
margin-bottom: 0;
}
.table > tbody > tr > td {
border: 0;
padding-top: 2px;
padding-bottom: 2px;
}
.table-wrapper {
width: 100%;
overflow-x: auto;
background-color: white;
padding: 1px;
height: auto;
max-height: 75vh;
border: 1px solid #616161;
/* Darkgray */
border-collapse: collapse;
}
.panel-body .table-wrapper {
border: 0;
}
/*Default draw color in table*/
.dfx-table {
color: black !important;
}
.row-disableMargin {
margin-left: -3px;
margin-right: 0;
}
.table-row {
height: 3em;
border-left: 3px solid transparent;
border-top: 1px solid #EEEEEE;
/* Lightgray */
border-collapse: collapse;
}
.table-row-link,
.row {
border-left-color: transparent;
border-left-style: solid;
border-left-width: 3px;
}
.table-row-link:hover {
cursor: pointer;
border-left: 3px solid #F44336 !important;
/* Red */
}
.table-header {
font-weight: normal !important;
color: #9E9E9E !important;
/* Gray */
border-right: 0px solid white !important;
border-bottom: 0px solid #EEEEEE;
/* Lightgray */
height: 3em;
vertical-align: middle;
}
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > th {
border-right: 0 !important;
border-left: 0 !important;
vertical-align: middle;
}
.table-header a {
font-weight: normal !important;
color: #9E9E9E !important;
/* Gray */
}
.table-header > th > a,
.dfx-table-header > a {
border-bottom: 2px solid transparent !important;
}
.table-header > th > a:hover,
.dfx-table-header > a:hover {
border-bottom: 2px solid #F44336 !important;
/* Red */
}
<div class="table-wrapper">
<table class="table table-bordered dfx-table">
<thead>
<tr class="table-header">
<th dfx-sort-col="Id">ID</th>
</tr>
</thead>
<tbody>
<tr class="table-row table-row-link">
<td>V001069</td>
</tr>
<tr class="table-row table-row-link">
<td>V001070</td>
</tr>
</tbody>
</table>
</div>
Screenshots of normal hover(1)
and with artefact(2) - vertical thin red lower line is the one which shouldn't be there:
Any ideas why this might happen?
Edit: made example on Snippet (doesn't work for some reason), also a copied it here: http://cssdeck.com/labs/full/uxjvf4fg

Answer 1

Well it's certainly a weird one, but then again, table rows have never played well with styles being applied to them in my experience.
What you can do instead, is just apply the border to the first cell within it like so:
.table-row-link:hover :first-child {
cursor: pointer;
border-left: 3px solid #F44336 !important; /* Red */
}
Here's your example from before, but working: http://cssdeck.com/labs/s56owpbt
As a general rule, I always apply "row styles" to the cells within them to get the effect I want. It tends to avoid weirdness like this.