Table TR with background-size bug Safari

Question

Look at this fiddle, he will work different on safari and chrome:

https://jsfiddle.net/sew120xt/1/

Desired look (chrome):

https://i.sstatic.net/q9ABs.png

Bugged look (safari):

https://i.sstatic.net/Sc6YF.png

Seems like Safari will treat the style for TR as a style for his childrens instead, is there a fix for that?

Answer 1

You seem to be correct that it is a bug. It isn't just the element <tr> itself but any element displayed as a table-row in a table displayed element. I've replicated the issue in the snippet below using non-table elements by changing the display property of each. (will only show incorrectly in Safari).

If you are able to change the display property of tr { } without it affecting your layout/design it will fix it. Try a few of the other display properties to see if any work.

.tbody {
  background-color:red;
  display: table;
}
.tr {
  background-image:linear-gradient(to right, black, black);
  background-size: 50% 100%;
  background-repeat:no-repeat;
  color:white;
  display: table-row;
}
span {
  display: table-cell;
}

<div class="tbody">
  <div class="tr">
    <span>aaaaaaaaaaaa</span>
    <span>bbbbbbbbbbbb</span>
    <span>cccccccccccc</span>
  </div>
</div>