I wanted to create a pulsing animation on a vertically and horizontally centered image using CSS animations. This works fine in Firefox and Chrome (mobile and OSX versions). But is screwed up in Safari, the positioning of the image is incorrect.

The weird thing is that after switching desktops (three finger swipe left or right) and coming back to safari, the image is positioned correctly.

I created a jsfiddle to show the issue, I left out all prefixes except -webkit.

JSfiddle here: https://jsfiddle.net/stxnt1sb/9/

HTML

CSS

article{
  position:relative;
  width:600px;
  height:400px;
  overflow:hidden;
}
img{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  -webkit-transform:translate(-50%,-50%);
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1) ;
  }
  33% {
    -webkit-transform:  translate(-50%, -50%) scale(1.05);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1) ;
  }
}

The image is positioned absolute within a relative container, centered with a translate(-50%,-50%). The pulsing is done with a css animation, animating the scale of the image.