Keyframe animation not working in Safari?

ReGGaeBOSS · November 22, 2014, 9:30am

Hi

I have a keyframe animation that works just fine in firefox and chrome, but wont start in Safari for some reason.
Here is my code (I am using autoprefixer, hence the lack of vendorprefixes).

<svg id="one" width="50" height="50" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="copy-1" class="group">
    <g class="large">
      <path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45,41.25 L75,42.5 L45,43.75 L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z" fill="white" />
    </g>
  </g>
</svg>

CSS

svg#one {
    	position: absolute;
    	transform: translate(630%, 480%);
    	z-index: 99;
    }
    .group {
        transform: translate(42.5px, 42.5px);
    }
    path {
        transform: translate(-42.50px,-42.50px);
    }
    svg#one .large {
    	transform: scale(0);
    	animation: large 5s infinite;
    }

@keyframes large {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	25% {
		opacity: 1;
	}
	50% {
		opacity: 0;
		transform: scale(1.5);
	}
	51%{
		transform: scale(0);
	}
   100% {
          transform: scale(0);
    }
}

RyanReese · November 22, 2014, 1:58pm

What version Safari? Also, Windows or Mac?

ReGGaeBOSS · November 22, 2014, 2:25pm

8, mac. Can’t remember having this problem before with keyframe animations.

PaulOB · November 22, 2014, 4:21pm

Hi,

Safari on the mac (as safari widows is dead) doesn’t seem to like the animation starting from zero but reversing the order seems to work.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
    background:red
}
svg#one {
    position: absolute;
    -webkit-transform: translate(630%, 480%);
    transform: translate(630%, 480%);
    z-index: 99;
}
.group {
    -webkit-transform: translate(42.5px, 42.5px);
    transform: translate(42.5px, 42.5px);
}
path {
    -webkit-transform: translate(-42.50px, -42.50px);
    transform: translate(-42.50px, -42.50px);
}
svg#one .large {

    -webkit-animation: large 5s infinite;
    animation: large 5s infinite;
}
@-webkit-keyframes large {
 0% { opacity: 0;-webkit-transform: scale(1.5) }
 1%{-webkit-transform: scale(0)}
 25% {opacity:1}
 50% { opacity: 0; -webkit-transform: scale(1.5);}
 100% {-webkit-transform: scale(0)}
}
@keyframes large {
 0% { opacity: 0;transform: scale(1.5) }
 1%{transform: scale(0)}
 25% {opacity:1}
 50% { opacity: 0;transform: scale(1.5);}
 100% {transform: scale(0)}
}



</style>
</head>

<body>
<svg id="one" width="50" height="50" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="copy-1" class="group">
        <g class="large">
                <path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45,41.25 L75,42.5 L45,43.75 L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z" fill="white" />
        </g>
</g>
</svg>
</body>
</html>

You may be able to tweak it better than that.

ReGGaeBOSS · November 22, 2014, 5:13pm

I have this in my index.html, and it works perfect in chrome and firefox, but its not showing up in Safari, can anyone tell me why and if there is some workaround?

	<svg id="one" width="50" height="50" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	  <g id="copy-1" class="group">
	    <g class="large">
	      <path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45,41.25 L75,42.5 L45,43.75 L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z" fill="white" />
	    </g>
	  </g>
	</svg>

ralphm · November 21, 2014, 11:20pm

“Not working” is a bit vague. Works fine for me in Safari. Because it has a white fill, the page needs a background color for it to show, though.

ReGGaeBOSS · November 22, 2014, 9:12am

Sorry maybe I should give you it all with the CSS etc. Now I see that the problem seem to be in the keyframe animation somehow, the transform: scale(0) is making it not show (obviously) and the animation wont start. This seems weird as it is working in chrome which also is webkit?

here it is:

	<svg id="one" width="50" height="50" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	  <g id="copy-1" class="group">
	    <g class="large">
	      <path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45,41.25 L75,42.5 L45,43.75 L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z" fill="white" />
	    </g>
	  </g>
	</svg>

CSS (no vendor prefixes as I use autoprefixer)

 svg#one {
    	position: absolute;
    	transform: translate(630%, 480%);
    	z-index: 99;
    }
    .group {
        transform: translate(42.5px, 42.5px);
    }
    path {
        transform: translate(-42.50px,-42.50px);
    }
    svg#one .large {
    	transform: scale(0);
    	animation: large 5s infinite;
    }
    
@keyframes large {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	25% {
		opacity: 1;
	}
	50% {
		opacity: 0;
		transform: scale(1.5);
	}
	51%{
		opacity: 0;
		transform: scale(0);
	}
}

PaulOB · November 22, 2014, 5:14pm

Threads merged:

See my reply in post #4

ReGGaeBOSS · November 22, 2014, 6:23pm

thanks seemed to do the trick for some reason. However, mine only works if I put opacity: 0; and transform: scale(1.5) in the .large style.

Like this:

svg#one .large {
	transform: scale(1.5);
	opacity: 0;
	animation: large 5s infinite;
}

@keyframes large {
 0% {opacity: 0; transform: scale(1.5);}
 1%{transform: scale(0);}
 25% {opacity:1;}
 50% {opacity: 0; transform: scale(1.5);}
 99% {transform: scale(0)}
 100%{transform: scale(1.5);
 }
}

And some other weird stuff is that its only sometimes in the “rotation” that the element actually gets the full 1.5 scaling. It is an infinite animation and at 25-50% it should scale to 1.5 and fade out, but sometimes the element is smaller than on the next rotation etc. In short: the animation doesnt seem consistent.

And another thing, if i remove the 99% or change it to scale(1.5) the animation doesnt work.

I have none of these problems in firefox or chrome.

PaulOB · November 23, 2014, 1:16pm

Yes it seems that Safari is buggy with animating the inner elements of that SVG. If you applied the animation to the svg element then it seems to work ok in Safari but of course travels up ad down a bit.

I think you will just have to find a happy medium. This code works quite nicely for me in all browsers.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
    background:red
}
svg#one {
    position: absolute;
    -webkit-transform: translate(630%, 480%);
    transform: translate(630%, 480%);
    z-index: 99;
}
.group {
    -webkit-transform: translate(42.5px, 42.5px);
    transform: translate(42.5px, 42.5px);
}
path {
    -webkit-transform: translate(-42.50px, -42.50px);
    transform: translate(-42.50px, -42.50px);
}
svg#one .large {

    -webkit-animation: large 5s infinite;
    animation: large 5s infinite;
}
@-webkit-keyframes large {
 0% { opacity: 0;-webkit-transform: scale(1.5) }
 1%{-webkit-transform: scale(0)}
 25% {opacity:1}
 100% { opacity: 0; -webkit-transform: scale(1.5);}
}

@keyframes large {
 0% { opacity: 0;transform: scale(1.5) }
 1%{transform: scale(0)}
 25% {opacity:1}
 100% { opacity: 0;transform: scale(1.5);}
}



</style>
</head>

<body>
<svg id="one" width="50" height="50" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="copy-1" class="group">
        <g class="large">
                <path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45,41.25 L75,42.5 L45,43.75 L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z" fill="white" />
        </g>
</g>
</svg>
</body>
</html>

system · February 22, 2015, 8:20pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.