Stuttery CSS animation for enlarging images in Safari

Question

I am trying to create an animation which takes a image that is anywhere on a page and moves it to the middle while resizing it to full width of the browser window. My solution works, but has some stutters/jumps in it, which I can't really explain. Is there anyone who has tried creating a similar animation already? EDIT: I noticed that the stutter problem only seems to appear in macOS Safari. In other browsers this animation appears to run perfectly smooth.

Here is my js code:

function getWindowWidth() {
   return document.documentElement.clientWidth
}

function getWindowHeight() {
   return document.documentElement.clientHeight;
}

//at the moment this is hacky and only supports one image to be enlarged
let en_img_left = null;
let en_img_top = null;

function enlargeImage(img) {
   let boundingClientRect = img.getBoundingClientRect();
   img.style.position = "fixed";
   en_img_top = boundingClientRect.y + "px";
   img.style.top = en_img_top;
   en_img_left = boundingClientRect.x + "px";
   img.style.left = en_img_left;
   img.style.width = boundingClientRect.width + "px";
   img.style.zIndex = "1000";
   setTimeout(function() {
      img.style.transition = "1s ease-in-out";
      setTimeout(function() {
         let scaleFactor = getWindowWidth() / boundingClientRect.width;
         img.style.transform = "scale(" + scaleFactor + ")";
         img.style.left = getWindowWidth() / 2 - (boundingClientRect.width / 2) + "px";
         img.style.top = getWindowHeight() / 2 - boundingClientRect.height / 2 + "px";
      }, 1);
   }, 1);
   return img;
}

function delargeImage(img) { //sorry for the function name
   img.style.transition = "1s ease-in-out";
   setTimeout(function() {
      img.style.transform = "scale(1)";
      img.style.left = en_img_left;
      img.style.top = en_img_top;
   }, 1);
   return img;
}

example HTML+CSS code, but it can be any image with an ID on a website:

HTML:

<div class="container">
<img id="example" style="width: 100%" src="https://images.pexels.com/photos/1361815/pexels-photo-1361815.jpeg?cs=srgb&dl=blur-bokeh-close-up-1361815.jpg&fm=jpg">
</div>

CSS:

.container {
   width: 200px;
}

I also made a jsfiddle displaying the stutter problem quite nicely: https://jsfiddle.net/robske_110/vhz5Ln4o/11/

Don't really see any stutters in your example?When should it occur can you specify, have you tried using the image from local resources rather than from a external link? — SomethingCool, Aug 27 '18 at 10:25
@whiterabbitj Oh, I tested it in other browsers now and the stutter appears to only be in Apple Safari on macOS. And using a local image or external resources makes no difference. Updated question. — robske_110, Aug 27 '18 at 10:44
hmm that's strange try clearing the cache, maybe restarting the computer, see if that helps. Do not see how Safari would interpret java script differently. Maybe changing the animation to more basic one and seeing if the stutter still appears would be a good idea? — SomethingCool, Aug 27 '18 at 11:16

score 0 · Answer 1 · answered Aug 27 '18 at 10:46

You are not using CSS animations or transitions!

The animation itself is executed through JavaScript in your example. Instead of computing every single step of an animation in JS and setting a new CSS property on each iteration, you should setup a CSS animation with the desired start- and end-states or define the properties, that should be transitioned. This way the animation should look smooth while transitioning.

Your example using a CSS transition (without any JS code):

.container {
 width: 200px;
  transition: width ease-in 1s;
}

.container:hover {
  width: 80vw;
}

.container img {
  width: 100%;
}

<div class="container">
   <img id="example" src="https://images.pexels.com/photos/1361815/pexels-photo-1361815.jpeg?cs=srgb&dl=blur-bokeh-close-up-1361815.jpg&fm=jpg">
</div>

Thank you for the answer! But I am using CSS animations, I'm just setting the end-and stop states in js. (No setInterval is used, only 2 setTimeouts to work around the animation being applied to the initial absolute pos detachment.) I might try to create an example with only css, but it won't change the outcome. Also I found out that the stutter only occurs in Safari, in other browsers my animation runs smooth, will clarify that even more. — robske_110, Aug 27 '18 at 10:53

Stuttery CSS animation for enlarging images in Safari

1 Answers1