creating a landing page I have a map with pinpoints. theses pinpoints are just a span that through an animation I change styles. animation working just fine in fire-fox and chrome. where I use this.changeClassName(place.style) as a variable to start animation. The problem is safari the image properties arent working.
I noticed That
background-repeat: no-repeat; // is not working
background-size: contain // I think it isn't working
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;
}
}