Блог

работая над линейным градиентом, я столкнулся с проблемой в 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>
 

Вот бегущая ручка

кто-то точно так же знал, как ее решить?

Я добавил translateZ(0) после поворота, и это сработало. Это выглядит так: transform: rotate(-90deg) translateZ(0px);