background-image CSS property doesn't display on narrow rows - css

Question

I've isolated a problem in my project down to this: Using a small background image, the image isn't displayed in smaller cells of a table when set to display on the entire row. Setting the width >5% suddenly fixes this issue, and I'd like to know why.
I'm using bootstrap 4 with a custom class I've written. Here's a fiddle with all the unnecessary parts of my project removed: https://jsfiddle.net/5y4gs8co/11/ Notice that cells 5.x do not display the background.
I've tested a few images, and this only happens with certain image sizes. This is where I'm stuck -- I don't want to use an unnecessarily large image here and I think there may be a solution.
.progress-bg {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAIAAADuA9qHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFwmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOS0wNi0xOVQwOToyOTowOS0wNDowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wNi0xOVQwOToyOTowOS0wNDowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTktMDYtMTlUMDk6Mjk6MDktMDQ6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6YmVkMGY4ODEtZDI5ZS1jMzQ2LTg5OWMtYjI1YjQyMDI1ZDBlIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YjllYzJlZWEtZTJlOC1hMzQyLWE3MTAtMWM4Nzk1MjUxZjY4IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YTBmMGY4MDQtOGRmMC0yMTQ1LWI5ZjYtZGEyNzkxNDAyM2MwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YTBmMGY4MDQtOGRmMC0yMTQ1LWI5ZjYtZGEyNzkxNDAyM2MwIiBzdEV2dDp3aGVuPSIyMDE5LTA2LTE5VDA5OjI5OjA5LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiZWQwZjg4MS1kMjllLWMzNDYtODk5Yy1iMjViNDIwMjVkMGUiIHN0RXZ0OndoZW49IjIwMTktMDYtMTlUMDk6Mjk6MDktMDQ6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+MDui9AAAABVJREFUCJljfPv/NQNuwIRHjoGBAQCrIALb0W2etgAAAABJRU5ErkJggg==') !important;
background-size: /*var(--percent)*/
100% 100%;
background-repeat: no-repeat;
}
Update: Reported the bug to the chrome bug tracker. Another workaround is adding a border: solid; to the <tr> element

Answer 1

Seems like another strange behaviour or tables when width is assigned in %. And this is independent of bootstrap.
I have no clue to why this happens but yes, there are a few strange behaviours of <table> when width of <td> is assigned in %. This i guess is one of them.
Maybe <table> were never designed to handle % value.
But as a solution to your problem, you can either replace width:5% to width: {required}px, or you can change below style rules of the .progress-bg css class:
.progress-bg {
background-image: url({requiredUrl});
background-repeat: repeat;
}

Answer 2

Consider adding the background on th and td tag.
.progress-bg th, .progress-bg td {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAIAAADuA9qHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFwmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOS0wNi0xOVQwOToyOTowOS0wNDowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wNi0xOVQwOToyOTowOS0wNDowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTktMDYtMTlUMDk6Mjk6MDktMDQ6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6YmVkMGY4ODEtZDI5ZS1jMzQ2LTg5OWMtYjI1YjQyMDI1ZDBlIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YjllYzJlZWEtZTJlOC1hMzQyLWE3MTAtMWM4Nzk1MjUxZjY4IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YTBmMGY4MDQtOGRmMC0yMTQ1LWI5ZjYtZGEyNzkxNDAyM2MwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YTBmMGY4MDQtOGRmMC0yMTQ1LWI5ZjYtZGEyNzkxNDAyM2MwIiBzdEV2dDp3aGVuPSIyMDE5LTA2LTE5VDA5OjI5OjA5LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiZWQwZjg4MS1kMjllLWMzNDYtODk5Yy1iMjViNDIwMjVkMGUiIHN0RXZ0OndoZW49IjIwMTktMDYtMTlUMDk6Mjk6MDktMDQ6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+MDui9AAAABVJREFUCJljfPv/NQNuwIRHjoGBAQCrIALb0W2etgAAAABJRU5ErkJggg==') !important;
background-size: 100% 100%;
background-repeat: no-repeat;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Description</th>
<th scope="col" style="width:5%">5%</th>
<th scope="col" style="width:6%">6%</th>
</tr>
</thead>
<!-- Table Body -->
<tbody>
<tr class="progress-bg">
<th scope="row">
First Item, With A Longer Title
</th>
<td>
A longer description, neat!
</td>
<td>
5.1
</td>
<td>
6.1
</td>
</tr>
<tr class="progress-bg">
<th scope="row">
Second Item, With A Longer Title
</th>
<td>
A longer description, neat!
</td>
<td>
5.2
</td>
<td>
6.2
</td>
</tr>
<tr class="progress-bg">
<th scope="row">
Third Item, With A Longer Title
</th>
<td>
A longer description, neat!
</td>
<td>
5.3
</td>
<td>
6.3
</td>
</tr>
</tbody>
</table>
</div>

Answer 3

#sudipto-roy Gave some good insight, and after a bit more testing this only happens in Chrome 75, IE 11, and Edge 18. FF 67 and Opera 60 render it properly. My solution was to raise the image dimensions, being mindful of what would compress well to base64. In my case the image was doubled in dimensions but only cost an additional ~20 Bytes.
I wish I could give more insight into what exact conditions cause this, but making the image larger seems to be a decent workaround.