Why is this table row background image disappearing behind the table cell? - html

Question

This has me stumped. I'm setting a background image on a tr. For some reason it disappears at the 4th column. Even stranger, the column it disappears behind depends on the width of the table.
I'm pretty sure I'm missing something dead obvious.
Edit: this does not happen with background-repeat: repeat;.
Edit2: added a 100% width sample to demonstrate that this has nothing to do with the actual table width.
Edit3: Just checked in a couple of browsers. This only happens in Chrome and Opera. Firefox and Edge are unaffected. So Bug?
Can anybody explain this?
.data-table {
width: 600px;
}
tr.ticket-rows {
background-image: url('https://media.tenor.com/images/6b7cfb462a7f171e6b1aca63fd5c0173/tenor.gif');
background-position: 200px -50px;
background-repeat: no-repeat;
}
tr, td {
background-color: transparent;
height: 100px
}
<table class="data-table">
<tbody>
<tr class="ticket-rows">
<td><input type="checkbox" value="on"></td>
<td>3589</td>
<td>John Smith</td>
<td>New</td>
<td>1</td>
<td>Medium</td>
<td></td>
</tr>
<tr class="ticket-rows">
<td><input type="checkbox" value="on"></td>
<td>3589</td>
<td>John Smith</td>
<td>New</td>
<td>1</td>
<td>Medium</td>
<td></td>
</tr>
</tbody>
</table>
.data-table {
width: 100%;
}
tr.ticket-rows {
background-image: url('https://media.tenor.com/images/6b7cfb462a7f171e6b1aca63fd5c0173/tenor.gif');
background-position: 300px -50px;
background-repeat: no-repeat;
}
tr, td {
background-color: transparent;
height: 100px
}
<table class="data-table">
<tbody>
<tr class="ticket-rows">
<td><input type="checkbox" value="on"></td>
<td>3589</td>
<td>John Smith</td>
<td>New</td>
<td>1</td>
<td>Medium</td>
<td></td>
</tr>
<tr class="ticket-rows">
<td><input type="checkbox" value="on"></td>
<td>3589</td>
<td>John Smith</td>
<td>New</td>
<td>1</td>
<td>Medium</td>
<td></td>
</tr>
</tbody>
</table>
https://codepen.io/franatec/pen/yLeeKzr?editors=1100

Answer 1

If I get it right you want an image behind your tr, you can add background-size: cover to fix this issues but it looks weird!
.data-table {
width: 600px;
}
tr.ticket-rows {
background-image: url('https://media.tenor.com/images/6b7cfb462a7f171e6b1aca63fd5c0173/tenor.gif');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
tr, td {
background-color: transparent;
height: 100px;
}
<table class="data-table">
<tbody>
<tr class="ticket-rows">
<td><input type="checkbox" value="on"></td>
<td>3589</td>
<td>John Smith</td>
<td>New</td>
<td>1</td>
<td>Medium</td>
<td></td>
</tr>
<tr class="ticket-rows">
<td><input type="checkbox" value="on"></td>
<td>3589</td>
<td>John Smith</td>
<td>New</td>
<td>1</td>
<td>Medium</td>
<td></td>
</tr>
</tbody>
</table>

Answer 2

This is a bug in Chromium and has been added to the issue list. https://bugs.chromium.org/p/chromium/issues/detail?id=1093390#c5
#AliKianoor provides a possible, but not perfect workaround. An alternative workaround would be do use a full size image so background-repeat: repeat can be used without side effects. Neither of these are optimal.