Stuttery animation when viewed in Chrome 52

Known Issues
1

Hi

This seems to have plagued some banners I’ve created for awhile now without a sure fix mentioned anywhere.

I have a div group with a few objects in them. One scales using scaleY from 102% to 100% with easeInOut. My issue is when viewed in Chrome it looks like micro stuttering. However in Safari there’s no such issue it’s smooth and silky.

Also I should note the image I’m scaling is 1720 x 400 px. I read chopping the image up might help with the scaling but I’ve noticed it to be negligible.

Is this something that can be fixed as a majority use Chrome for viewing the work especially my client.

Thanks

2

Would a 300x600 image still be problematic? Checking other sizes we’ve created and they exhibit the same issue. My developer thinks it might be because there are several layered .png images in the creative. We use transparent png’s that cover the frame rather than positioning x and y. This could be the issue?

3

Can’t really tell what this might be. I recommend toggling ‘use webkit acceleration’ in the Document inspector and seeing if that gives you better results. Are you sure that the only animation is scale? That should be pretty smooth in Chrome.

4

Any chance you could send a .hype document where this is happening? I’d be happy to take a look.

5

Hi sorry to resurrect an old thread but the client has asked for us to take a look at this again as they’re not entirely happy with the animation. Is there a support email address I can send the content to rather than having it displayed here in public.

6

We received your email – will get back to you soon.

8

Have you tried unchecking “Position with CSS left/top”? I found that can make a a big difference to the smoothness of animations.

9

It looks like Chrome 52 has an issue where it won’t do interpolate positions with transform:translate, so positions are always on pixel boundaries (as if you were to check 'position with css left/top). This appears corrected in the upcoming Chrome 53.

10

Returning to this after awhile. Glad to know this was the cause and that it has now been fixed.

2 Likes
11

hi, i am still having the above described problems on chrome53. safari and firefox are working well. any idea?

test.hype.zip (76.9 KB)

12

It looks pretty good to me; are you using Hype 3.5.3? Could you perhaps post a 60fps screen capture?

13

chrome jittering is fixed - but on windows edge there is massive jittering when using scale.
(position css left/top is turned off)
test.hype.zip (86.4 KB)

15

Thanks; I can reproduce the issue; it looks like Edge doesn’t like to use fractional pixel rendering by default. I’ll try to get a workaround for this in the next version. One workaround is to add a Z rotation of 1 degree (though this is probably going to be noticeable depending on what you’re doing).