Safari Table Row Gradient Background Repeat Bug

Question

When I use the gradient background in the tr tag, it seems to work normally in other browsers, but it seems as if the background code is applied to each td tag in Safari. You will understand what I mean when you run the sample code below both in Safari and in another browser. Anyone have a solution suggestion for this issue?

Chrome:

Safari:

table {
  border-collapse: collapse;
}

tr {
  background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%);
}

td {
  border: 1px solid grey;
}

<table>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
</table>

Answer 1

In Safari (and also observed in Chrome on IOS) the background image seems to be being applied to each td element rather than their containing tr.

Adding display: block; to the tr element gives the correct result. However, I do not know whether this would disturb anything else in the table layout so this would need to be checked in any particular case.

Here’s the snippet. Tested on Safari and Chrome on iPad 14 and Chrome, Firefox, and Edge on Windows 10. Gives wrong result in IE11 on Windows10.

table {
  border-collapse: collapse;
}

tr {
  display: block;
  background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%);
}

td {
  border: 1px solid grey;
}

<table>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
</table>