CSS animation of object-position in Safari 12

user_3920336 0
Viewed 1453

Displaying image with object-fit and object-position works in browsers that support them, but in Safari 12, animating the object-position property to create a moving effect doesn't appear to do anything (same with using CSS transitions).

Is this a bug? or am I missing something?

I made a simple box and image to demo: https://codepen.io/Taruckus/pen/zyoGNX

  <html>
    <head>
    </head>
    <body>
      <div class="wrap"><img src="https://via.placeholder.com/500x2000" alt=""></div>
    </body>
  </html>


 <style>
        .wrap {
            width: 400px;
            height: 400px;
            position: relative;
        }
        .wrap img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 0%;
            animation: move 5s ease 1 normal forwards;
            animation-delay: 0.2s;
        }

        @keyframes move {
            0% {
                object-position: 50% 30%;
            }
            100% {
                object-position: 50% 60%;
            }
        }
 </style>
css-animations safari css
1 Answers

Consider animating transform property. It would be more performant and cross-browser.

Run the snippet below:

.wrap {
  width: 400px;
  height: 400px;
  overflow: hidden;
}

.wrap img {
  width: 100%;
  transform: translateY(-20%);
  animation: move 5s forwards .2s;
}

@keyframes move {
  100% {
    transform: translateY(-45%);
  }
}
<div class="wrap">
  <img src="https://via.placeholder.com/500x2000" alt="">
</div>

user_57243030
Related