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

【问题标题】：Linear gradient and rotate produce an issue on Safari线性渐变和旋转在 Safari 上产生问题
【发布时间】：2021-08-31 09:40:00
【问题描述】：

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

: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

有人知道如何解决吗？

【问题讨论】：

标签： css safari transform linear-gradients

【解决方案1】：

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

【讨论】：