gradient mixin vertical-three-colors on <tr> doesn't render correctly on IE11 or Edge
Created by: RodolpheGohard
Hi,
when applying a vertical-three-colors gradient on a <tr>
in IE11, I get a buggy display: the gradient does'nt extend to the full width of the <tr>
.
Here is a demo:
<style type="text/css">
/* GENERATED FROM LESS .gradiented {
.vertical-three-colors(#cccccc, #e9e9e9, 5%, #e9e9e9);
}*/
.gradiented {
background-image: -webkit-linear-gradient(#cccccc, #e9e9e9 5%, #e9e9e9);
background-image: -o-linear-gradient(#cccccc, #e9e9e9 5%, #e9e9e9);
background-image: linear-gradient(#cccccc, #e9e9e9 5%, #e9e9e9);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcccccc', endColorstr='#ffe9e9e9', GradientType=0);
}
</style>
<table>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr class="gradiented">
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
in this sample, running IE11, I only get the first cell to be filled. The situation doesn't happen if I remove the background-repeat: no-repeat;
property, which makes me wonder why it's there to begin with.