Safari 浏览器在图像上显示模糊动画以实现缩放和不透明度 CSS 动画

Question

我正在为一张图片在网络上制作悬停动画。 它在 chrome、firefox 上运行良好。但是当我在 safari 上尝试时，动画图像是模糊的，直到动画结束。

所以我在stackoverflow上搜索了很多以了解可能是什么错误，但是尝试了所有方法，仍然没有解决方案

html

.hiddenStar{
        
        width:1px;
        height: 1px;
        position:absolute;
        top: 40%; right: 50%;
        transform: translate(50%,-50%);
      
        -moz-opacity: 0; /* Firefox and Mozilla browsers */
        -webkit-opacity: 0; /* WebKit browser e.g. Safari */
        opacity: 0;
       
        -webkit-transform: scale(1,1); /* Safari & Chrome */
        -moz-transform: scale(1); /* Firefox */
      -ms-transform: scale(1); /* Internet Explorer */
      -o-transform: scale(1); /* Opera */
      transform: scale(1);
        transition: all 1s;
        
      }
     
      #starspan:hover +.hiddenStar{
       
        -moz-opacity: 1; /* Firefox and Mozilla browsers */
        -webkit-opacity: 1; /* WebKit browser e.g. Safari */
        opacity: 1;
        
        -webkit-transform: scale(90,90); /* Safari & Chrome */
      -moz-transform: scale(90); /* Firefox */
    -ms-transform: scale(90); /* Internet Explorer */
    -o-transform: scale(90); /* Opera */
    transform: scale(90);
        transition: all 1s;
      }

<p>
  <span className="text-brand " id="starspan" >Star</span>
  <img src="https://res.cloudinary.com/zerko/image/upload/v1634379420/Logomark_kxgewd.svg" class="hiddenStar"/>
  </p>

尝试了 webkit 的规模和不透明度，但仍然是同样的问题。 我在这里缺少什么？

Answer 1

在 Safari 中从 0.01 缩放到 1。但不知道为什么……神秘的浏览器……

.hiddenStar{
        
        width:90px;
        height:90px;
        position:absolute;
        top: 40%; right: 50%;
        transform: translate(50%,-50%);
      
        -moz-opacity: 0; /* Firefox and Mozilla browsers */
        -webkit-opacity: 0; /* WebKit browser e.g. Safari */
        opacity: 0;
       
        -webkit-transform: scale(0.01,0.01); /* Safari & Chrome */
        -moz-transform: scale(0.01); /* Firefox */
      -ms-transform: scale(0.01); /* Internet Explorer */
      -o-transform: scale(0.01); /* Opera */
      transform: scale(0.01);
        transition: all 1s;
        
      }
     
      #starspan:hover +.hiddenStar{
       
        -moz-opacity: 1; /* Firefox and Mozilla browsers */
        -webkit-opacity: 1; /* WebKit browser e.g. Safari */
        opacity: 1;
        
        -webkit-transform: scale(1,1); /* Safari & Chrome */
      -moz-transform: scale(1); /* Firefox */
    -ms-transform: scale(1); /* Internet Explorer */
    -o-transform: scale(1); /* Opera */
    transform: scale(1);
      }

<p>
  <span className="text-brand " id="starspan" >Star</span>
  <img src="https://res.cloudinary.com/zerko/image/upload/v1634379420/Logomark_kxgewd.svg" class="hiddenStar"/>
  </p>