Search code examples
csssafaritransformlinear-gradients

Linear gradient and rotate produce an issue on Safari

working on linear gradient i've getting an issue on Safari. Only in that browser it appers the line with che color of the gradient only in certain position and only if text is rotate.

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

Here the running Pen

enter image description here

someone had the same know how to solve it?

Solution

  • I added translateZ(0) after rotation and it worked. It looks like this: transform: rotate(-90deg) translateZ(0px);