0

I'm creating a rotating spiral as a background image and have set it up using an SVG declared in a CSS file as a Data URI (see Fiddle). The animation works great in Chrome but Safari 13.1 only displays the spiral and doesn't seem to animate it. I can't find anything that categorically says this isn't supported in more recent versions of Safari. Have been working home for 5 weeks alone - am I missing something or is this not supported in Safari?

(For the sake of the example I've used a random icon svg)

.spiral {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cstyle%3E%0A%23eating %7B animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; -webkit-animation: spin 1s linear infinite; transform-origin: center center; -moz-transform-origin: center center; -webkit-transform-origin: center center;%0A%7D @keyframes spin %7B to %7B transform: rotate(360deg); %7D%0A%7D%0A@-moz-keyframes spin %7B to %7B -moz-transform: rotate(360deg); %7D%0A%7D%0A@-webkit-keyframes spin %7B to %7B -webkit-transform: rotate(360deg); %7D%0A%7D %3C/style%3E%3Cpath id='eating' d='M40.719,43.272c-1.25-1.25-1.875-3.438-1.562-5c0,0,1.875-6.562-1.875-10.312 c-4.062-4.063-16.562-13.438-22.5-7.812c-5.625,5.625,3.75,18.437,7.812,22.5c3.75,3.75,10.312,1.875,10.312,1.875 c1.562-0.312,4.062,0.312,5,1.562c0,0,28.75,32.188,30.312,33.75c2.188,2.188,5.625,2.812,7.187,1.25s1.25-5-1.25-7.187 C72.907,72.022,40.719,43.272,40.719,43.272z M23.844,74.522c-2.187,2.188-2.812,5.625-1.25,7.188s5,1.25,7.188-1.25 c0.938-0.938,9.688-10.625,17.5-19.688c-1.25-1.562-2.812-3.125-4.063-4.375C34.469,64.835,24.782,73.585,23.844,74.522z M60.407,47.022c1.25-1.25,3.438-1.875,5-1.562c0,0,5.312,0.312,8.75-3.438c2.188-2.188,10.625-11.25,12.812-15.938l-0.312-0.313 c-5.625,5.625-14.688,14.062-15,13.438c-0.312-0.312,8.125-9.687,13.438-15l-0.625-0.625c-5.625,5.625-14.688,14.062-15,13.438 c-0.312-0.312,8.125-9.687,13.438-15l-0.625-0.625c-5.625,5.625-14.688,14.062-15,13.438c-0.312-0.312,8.125-9.688,13.438-15 l-0.625-0.625c-5.625,5.625-14.688,14.062-15,13.438c-0.312-0.313,8.125-9.688,13.437-15l-0.312-0.312 c-4.688,2.5-13.75,10.625-15.938,12.812c-3.75,3.75-3.438,8.75-3.438,8.75c0.312,1.562-0.312,4.062-1.562,5c0,0-2.188,1.875-5.625,5 c1.25,0.938,2.188,2.188,3.438,3.125C58.219,48.897,60.407,47.022,60.407,47.022z'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 200px;
  width:100%;
}
<div class="spiral"></div>
Adrian with a W
  • 1
  • 1
  • Works ok for me (clockwise rotating spoon and fork cross) on Safari Version 11.1.2. – rtx13 May 11 '20 at 04:35
  • See https://stackoverflow.com/questions/60975613/svg-animation-struggles-with-safari-13-1-mac-os-ios and https://stackoverflow.com/questions/61121806/svg-image-with-inline-css-animations-not-longer-working-on-macos-safari-13-1 – Robert Longson May 11 '20 at 06:15
  • @RobertLongson not sure how the first link helps - can you render an object as a background image or are you suggesting the background image be on the `` – Adrian with a W May 12 '20 at 03:02
  • you'd have to convert the background image to an instead. – Robert Longson May 12 '20 at 05:18
  • Yeah ok, I realise I can use an object to animate the SVG but that's not really a solution as I was more looking for why Desktop Safari might not be treating the SVG like every other browser does - Chrome, Firefox and Mobile Safari all behave as expected. – Adrian with a W May 12 '20 at 06:57

0 Answers0