Table cell gradient fill issue - html

Question

When use gradient fill for table cell, I expect rendering issues with cell borders on window resize and it's not observable when solid color fill is used.
Here is one table, some cells use gradient fill, others - solid color:
This dark gap is visible only on particular window sizes, not always.
Is it known issue?
Is there any hack for this?
Update:
Here is an example: https://codepen.io/zur4ik/pen/bmjLVp
Try change view and resize in horizontal axes
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #140B0A;
font-family: sans-serif;
}
.com-container {
width: 1540px;
margin: 0 auto;
}
.fx {
display: flex;
}
.fx.vc {
align-items: center;
}
.com-game-table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.com-game-table thead tr th {
background-color: #784B3E;
height: 60px;
font-weight: 300;
position: relative;
cursor: pointer;
}
.com-game-table thead tr th:hover {
background-color: #71473b;
}
.com-game-table thead tr th:first-child {
border-top-left-radius: 5px;
overflow: hidden;
}
.com-game-table thead tr th:last-child {
border-top-right-radius: 5px;
overflow: hidden;
}
.com-game-table tbody tr td {
height: 60px;
color: #000000;
background: #FBFBFB;
background: -moz-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: -webkit-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: linear-gradient(to bottom, #FBFBFB 0%, #EFEFEF 100%);
cursor: pointer;
border-collapse: collapse;
border: 0 transparent;
}
.com-game-table tbody tr td:first-child {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
overflow: hidden;
}
.com-game-table tbody tr td:last-child {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
overflow: hidden;
}
.com-game-table tbody tr td .status-cell {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 20px;
}
.com-game-table tbody tr td .status-cell .icon {
background-image: url("../img/tb-row-play-btn-icon.png");
background-repeat: no-repeat;
background-position: left 10px top 50%;
display: inline-block;
width: 27px;
height: 27px;
background-color: #ffffff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);
position: relative;
top: 1px;
margin-left: 10px;
}
.com-game-table tbody tr td.col-highlight {
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%);
background: -webkit-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%);
background: linear-gradient(to bottom, #eeeeee 0%, #e2e2e2 100%);
}
.com-game-table tbody tr.started td {
background: #30211F;
background: -moz-linear-gradient(top, #30211F 0%, #241715 100%);
background: -webkit-linear-gradient(top, #30211F 0%, #241715 100%);
background: linear-gradient(to bottom, #30211F 0%, #241715 100%);
color: #989291;
}
.com-game-table tbody tr.started td .com-icon {
opacity: .5;
}
.com-game-table tbody tr.started td .com-icon:hover {
opacity: 1;
}
.com-game-table tbody tr.started td .status-cell .icon {
background-image: url("../img/tb-row-view-btn-icon.png");
background-position: left 6px top 50%;
opacity: .7;
}
.com-game-table tbody tr.started td.col-highlight {
background: #2a1d1b;
background: -moz-linear-gradient(top, #2a1d1b 0%, #1e1311 100%);
background: -webkit-linear-gradient(top, #2a1d1b 0%, #1e1311 100%);
background: linear-gradient(to bottom, #2a1d1b 0%, #1e1311 100%);
}
.com-game-table tbody tr:hover td {
background: white;
background: -moz-linear-gradient(top, white 0%, #fcfcfc 100%);
background: -webkit-linear-gradient(top, white 0%, #fcfcfc 100%);
background: linear-gradient(to bottom, white 0%, #fcfcfc 100%);
}
.com-game-table tbody tr:hover.started td {
background: #332321;
background: -moz-linear-gradient(top, #332321 0%, #271917 100%);
background: -webkit-linear-gradient(top, #332321 0%, #271917 100%);
background: linear-gradient(to bottom, #332321 0%, #271917 100%);
}
.com-game-table tbody tr:hover.started td .status-cell .icon {
opacity: .8;
}
.com-game-table [data-type="tb-col-1"] {
width: 100px;
text-align: center;
}
.com-game-table [data-type="tb-col-2"] {
text-align: left;
padding-left: 15px;
}
.com-game-table [data-type="tb-col-3"] {
width: 110px;
text-align: center;
}
.com-game-table [data-type="tb-col-4"] {
width: 130px;
text-align: center;
}
.com-game-table [data-type="tb-col-5"] {
width: 160px;
text-align: center;
}
.com-game-table [data-type="tb-col-6"] {
width: 120px;
text-align: center;
}
.com-game-table [data-type="tb-col-7"] {
width: 80px;
text-align: center;
}
.com-game-table [data-type="tb-col-8"] {
width: 180px;
text-align: right;
}
main {
flex-grow: 1;
display: flex;
flex-flow: column;
min-height: 0;
width: 100%;
}
main .content {
display: flex;
flex-grow: 1;
align-items: stretch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 15px;
min-height: 0;
}
main .content .content-body {
flex-grow: 1;
padding-right: 15px;
display: flex;
}
main .content .content-body .table-wrapper {
display: flex;
flex-direction: column;
position: relative;
}
main .content .content-body .table-wrapper .table-header {
height: 60px;
position: absolute;
z-index: 2;
}
main .content .content-body .table-wrapper .table-header:after {
content: '';
display: block;
position: absolute;
width: 5px;
height: 5px;
background: #140B0A;
top: 0;
right: 25px;
z-index: 1;
}
main .content .content-body .table-wrapper .table-header .com-game-table {
position: relative;
z-index: 2;
}
main .content .content-body .table-wrapper .table-body {
overflow-y: hidden;
overflow-x: hidden;
flex: 1 1 auto;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
main .content .content-body .table-wrapper .table-body .table-body-inner {
padding-top: 60px;
}
main .content .content-body .table-wrapper .table-body .com-game-table {
border-spacing: 0;
}
main .content .content-body .table-wrapper .table-body .com-game-table tbody tr td .com-icon.tooltip {
cursor: help;
}
<main>
<section class="content">
<div class="com-container fx">
<div class="content-body">
<div class="table-wrapper">
<div class="table-header">
<table class="com-game-table" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th data-type="tb-col-1">A</th>
<th data-type="tb-col-2">B</th>
<th data-type="tb-col-3">C</th>
<th data-type="tb-col-4">D</th>
<th data-type="tb-col-5">E</th>
<th data-type="tb-col-6">F</th>
<th data-type="tb-col-7">G</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<div class="table-body-inner">
<table class="com-game-table" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</main>

Answer 1

Ok from what I can work out, this is a sub-pixel rounding problem in Chrome and Edge.
A linear gradient behaves like a background image and is tessellated across the background.
I am not clear on the precise behaviour of the rendering engine but when certain widths are not divisible a 1px gap is introduced.
Firefox doesn't appear to suffer this issue because I suspect it rounds up.
WORKAROUND
We cannot get rid of the gap created in Chrome but we can hide the fact from the end user.
Apply the gradient to the row instead of the cell. The cell needs to remain transparent.
Apply no-repeat so the background gradient doesn't try to tile incorrectly.
CSS
.com-game-table tbody tr {
background: #EFEFEF;
background: -moz-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: -webkit-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: linear-gradient(to bottom, #FBFBFB 0%, #EFEFEF 100%);
background-repeat: no-repeat;
}
EXAMPLE
In the example below I have applied the following fix to ONLY the white rows.
It will need appling to rows of alternate colors and also to hover effects.
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #140B0A;
font-family: sans-serif;
}
.com-container {
width: 1540px;
margin: 0 auto;
}
.fx {
display: flex;
}
.fx.vc {
align-items: center;
}
.com-game-table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.com-game-table thead tr th {
background-color: #784B3E;
height: 60px;
font-weight: 300;
position: relative;
cursor: pointer;
}
.com-game-table thead tr th:hover {
background-color: #71473b;
}
.com-game-table thead tr th:first-child {
border-top-left-radius: 5px;
overflow: hidden;
}
.com-game-table thead tr th:last-child {
border-top-right-radius: 5px;
overflow: hidden;
}
.com-game-table tbody tr {
background: #EFEFEF;
background: -moz-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: -webkit-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: linear-gradient(to bottom, #FBFBFB 0%, #EFEFEF 100%);
background-repeat: no-repeat;
}
.com-game-table tbody tr td {
height: 60px;
color: #000000;
cursor: pointer;
border-collapse: collapse;
border: 0 transparent;
}
.com-game-table tbody tr td:first-child {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
overflow: hidden;
}
.com-game-table tbody tr td:last-child {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
overflow: hidden;
}
.com-game-table tbody tr td .status-cell {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 20px;
}
.com-game-table tbody tr td .status-cell .icon {
background-image: url("../img/tb-row-play-btn-icon.png");
background-repeat: no-repeat;
background-position: left 10px top 50%;
display: inline-block;
width: 27px;
height: 27px;
background-color: #ffffff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);
position: relative;
top: 1px;
margin-left: 10px;
}
.com-game-table tbody tr td.col-highlight {
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%);
background: -webkit-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%);
background: linear-gradient(to bottom, #eeeeee 0%, #e2e2e2 100%);
}
.com-game-table tbody tr.started td {
background: #30211F;
background: -moz-linear-gradient(top, #30211F 0%, #241715 100%);
background: -webkit-linear-gradient(top, #30211F 0%, #241715 100%);
background: linear-gradient(to bottom, #30211F 0%, #241715 100%);
color: #989291;
}
.com-game-table tbody tr.started td .com-icon {
opacity: .5;
}
.com-game-table tbody tr.started td .com-icon:hover {
opacity: 1;
}
.com-game-table tbody tr.started td .status-cell .icon {
background-image: url("../img/tb-row-view-btn-icon.png");
background-position: left 6px top 50%;
opacity: .7;
}
.com-game-table tbody tr.started td.col-highlight {
background: #2a1d1b;
background: -moz-linear-gradient(top, #2a1d1b 0%, #1e1311 100%);
background: -webkit-linear-gradient(top, #2a1d1b 0%, #1e1311 100%);
background: linear-gradient(to bottom, #2a1d1b 0%, #1e1311 100%);
}
.com-game-table tbody tr:hover td {
background: white;
background: -moz-linear-gradient(top, white 0%, #fcfcfc 100%);
background: -webkit-linear-gradient(top, white 0%, #fcfcfc 100%);
background: linear-gradient(to bottom, white 0%, #fcfcfc 100%);
}
.com-game-table tbody tr:hover.started td {
background: #332321;
background: -moz-linear-gradient(top, #332321 0%, #271917 100%);
background: -webkit-linear-gradient(top, #332321 0%, #271917 100%);
background: linear-gradient(to bottom, #332321 0%, #271917 100%);
}
.com-game-table tbody tr:hover.started td .status-cell .icon {
opacity: .8;
}
.com-game-table [data-type="tb-col-1"] {
width: 100px;
text-align: center;
}
.com-game-table [data-type="tb-col-2"] {
text-align: left;
padding-left: 15px;
}
.com-game-table [data-type="tb-col-3"] {
width: 110px;
text-align: center;
}
.com-game-table [data-type="tb-col-4"] {
width: 130px;
text-align: center;
}
.com-game-table [data-type="tb-col-5"] {
width: 160px;
text-align: center;
}
.com-game-table [data-type="tb-col-6"] {
width: 120px;
text-align: center;
}
.com-game-table [data-type="tb-col-7"] {
width: 80px;
text-align: center;
}
.com-game-table [data-type="tb-col-8"] {
width: 180px;
text-align: right;
}
main {
flex-grow: 1;
display: flex;
flex-flow: column;
min-height: 0;
width: 100%;
}
main .content {
display: flex;
flex-grow: 1;
align-items: stretch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 15px;
min-height: 0;
}
main .content .content-body {
flex-grow: 1;
padding-right: 15px;
display: flex;
}
main .content .content-body .table-wrapper {
display: flex;
flex-direction: column;
position: relative;
}
main .content .content-body .table-wrapper .table-header {
height: 60px;
position: absolute;
z-index: 2;
}
main .content .content-body .table-wrapper .table-header:after {
content: '';
display: block;
position: absolute;
width: 5px;
height: 5px;
background: #140B0A;
top: 0;
right: 25px;
z-index: 1;
}
main .content .content-body .table-wrapper .table-header .com-game-table {
position: relative;
z-index: 2;
}
main .content .content-body .table-wrapper .table-body {
overflow-y: hidden;
overflow-x: hidden;
flex: 1 1 auto;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
main .content .content-body .table-wrapper .table-body .table-body-inner {
padding-top: 60px;
}
main .content .content-body .table-wrapper .table-body .com-game-table {
border-spacing: 0;
}
main .content .content-body .table-wrapper .table-body .com-game-table tbody tr td .com-icon.tooltip {
cursor: help;
}
<main>
<section class="content">
<div class="com-container fx">
<div class="content-body">
<div class="table-wrapper">
<div class="table-header">
<table class="com-game-table" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th data-type="tb-col-1">A</th>
<th data-type="tb-col-2">B</th>
<th data-type="tb-col-3">C</th>
<th data-type="tb-col-4">D</th>
<th data-type="tb-col-5">E</th>
<th data-type="tb-col-6">F</th>
<th data-type="tb-col-7">G</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<div class="table-body-inner">
<table class="com-game-table" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</main>