Таблица TR с ошибкой фонового размера Safari

Question

Посмотрите на эту скрипку, он будет работать по-разному в сафари и хроме:

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

Желаемый вид (хром):

https://i.stack.imgur.com/q9ABs.png

Жучий вид (сафари):

https://i.stack.imgur.com/Sc6YF.png

Похоже, что Safari вместо этого будет рассматривать стиль TR как стиль для своих детей, есть ли какое-то решение для этого?

Answer 1

Вы правы, что это ошибка.Это не просто элемент <tr>, а любой элемент, отображаемый как table-row в отображаемом элементе table.Я повторил проблему во фрагменте ниже, используя элементы не из таблицы, изменив свойство display каждого из них.(будет отображаться неправильно только в Safari).

Если вы можете изменить display свойство tr { }, не влияя на ваш макет / дизайн, оно исправит это.Попробуйте несколько других свойств отображения , чтобы увидеть, работает ли оно.

.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>