Css 背景图像动画在safari react应用程序中不起作用

创建一个登录页我有一个精确的地图。这些精确定位只是一个跨度，通过动画我可以改变风格。动画在fire fox和chrome中运行良好。 其中我使用this.changeClassName（place.style）作为变量来启动动画。 问题是safari图像属性不起作用

• 我注意到
  背景重复：无重复；//它不起作用了
  背景尺寸：contain//我认为它不起作用

render（）{
返回(
}
)         
//scss
多特先生{
宽度：1.8雷姆；
高度：1.8雷姆；
显示器：flex；
边界半径：50%；
背景颜色：$橘黄色；
&-燃气轮机{
保证金：0.2雷姆0.1.5雷姆；
&.启动动画{
-webkit动画：dottop4000ms向前移动500ms；
动画：dottop4000ms向前移动500ms；
}
}
@关键帧点顶{
0% {
背景图像：url（'../assets/icons/pin.svg'）；
//-webkit背景大小：包含；
背景重复：无重复；
背景位置：中心；
背景尺寸：包含；
背景色：透明；
边界：无；
转换：translateY（-300px）；
}
50% {
背景图像：url（'../assets/icons/pin.svg'）；
//-webkit背景大小：包含；
背景重复：无重复；
背景位置：中心；
背景尺寸：包含；
宽度：7雷姆；
身高：7雷姆；
背景色：透明；
边界：无；
边界半径：50%；
转换：translateX（-50px）；
顶部：-10雷姆；
}
55%{边界半径：50%；}
57%{背景图像：无；}
59%{边框：无；背景颜色：透明}
60%{背景色：$tangerine yellow}
70%{边界半径：50%；}
100% {
宽度：1.8雷姆；
高度：1.8雷姆；
背景图像：无；
//背景色：红色；
}
}

render (){

return (
    <span key={`${place.name}-${place.style}`}
     className={`dot ${this.changeClassName(place.style)}`}
    >
    </span>
  }
)         
 // the scss 

 .dot {
   width: 1.8rem;
   height: 1.8rem;
   display: flex;
   border-radius: 50%;
   background-color: $tangerine-yellow;

   &-gt {
     margin: 0.2rem 0 0 1.5rem;
     &.start-animation {
       -webkit-animation: dotTop 4000ms ease-out 500ms forwards;
       animation: dotTop 4000ms ease-out 500ms forwards;
     }
          
}
         @keyframes dotTop {
            0% {
              background-image: url('../assets/icons/pin.svg');
              // -webkit-background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              background-size: contain;
              background-color: transparent;
              border: none;
              transform: translateY(-300px);
            }
            50% {
              background-image: url('../assets/icons/pin.svg');
              // -webkit-background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              background-size: contain;
              width: 7rem;
              height: 7rem;
              background-color: transparent;
              border: none;
              border-radius: 50%;
              transform: translateX(-50px);
              top: -10rem;
            }
            55% { border-radius: 50%; }
            57% { background-image: none; }
            59% { border: none; backgroung-color: transparent }
            60% { background-color: $tangerine-yellow }
            70% { border-radius: 50%; }
            100% {
              width: 1.8rem;
              height: 1.8rem;
              background-image: none;
              // background-color: red;
            }
          }