线性渐变和旋转在 Safari 上产生问题

Question

处理线性渐变时，我在 Safari 上遇到了问题。仅在该浏览器中，它仅在特定位置且仅当文本旋转时才显示带有渐变颜色的线条。

:root{
  --RBI-color-red: rgba(207, 0, 0, 1); 
}

.big-date-wrapper{
  font-size: 100px;
  transform-origin: left bottom;
  display: inline-block;
  position: relative;
  top:0%;
  transform: translateY(-79%) rotate(90deg);
  span{
      background: -webkit-linear-gradient(var(--RBI-color-red), var(--RBI-color-red));
      background: -moz-linear-gradient(var(--RBI-color-red), var(--RBI-color-red));
      background: -o-linear-gradient(var(--RBI-color-red), var(--RBI-color-red));
      background: linear-gradient(var(--RBI-color-red), var(--RBI-color-red));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
}


<div class="big-date-wrapper">
  <span style="">2</span>
  <span style="">0</span>
  <span style="">2</span>
  <span style="">1</span>
</div>

这里是运行Pen

有人知道怎么解决吗？

Answer 1

我在旋转后添加了 translateZ(0)，它起作用了。它看起来像这样： transform: rotate(-90deg) translateZ(0px);

线性渐变和旋转在 Safari 上产生问题

Linear gradient and rotate produce an issue on Safari

css

safari

transform

linear-gradients