css - 背景图像动画在 Safari 反应应用程序中不起作用

Question

创建登陆页面 我有一个带有精确点的地图。这些精确点只是我通过动画改变风格的一个跨度。动画在 fire-fox 和 chrome 中工作得很好。我使用 this.changeClassName(place.style) 作为变量来启动动画。问题是 safari 图像属性不起作用。

• 我注意到了

  背景重复：不重复；// 不管用

  背景大小：包含//我认为它不起作用

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;
            }
          }

标签： cssreactjssafaribackground-image