Jittery animation

Animation
1

My hype file plays fine in hype. In a browser the first headline is jittery when it slides up. The weird thing is on the 300x600 ad the large copy is jittery, on the 300x250 the small copy is jittery, and the large copy is fine. Any ideas? File attached

PS. Position with CSS is off.
Pararekau Ads Offshore.hype.zip (526.5 KB)

2

Could only replicate the jiggering issue on the Firefox browser, on Chrome and Safari it seems to work fine for me.

One way to fix this for Firefox is to add this bit of rotation in css. In the header insert this

<style>		
html {
		-moz-transform: rotate(0.1deg);
        -ms-transform: rotate(0.1deg);
        -o-transform: rotate(0.1deg);
        -webkit-transform: rotate(0.1deg);
        transform: rotate(0.1deg);
	}
</style>

*Edit, it seems to make the banner a bit more blurry

1 Like
3

I'm not sure I can see this on any browser... would it be possible to let me know:

  • exactly which elements are experiencing this
  • what browser version you are using
  • what OS version you are using
  • if you are using a retina or non-retina monitor

Also if you can make a screen capture using QuickTime Player's 'File > New Screen Recording' that shows it on your computer that may help.

4

Thanks guys, the css doesnt seem to help, but the question about the screen got me thinking. If I unplug my external monitor, it doesnt jitter on my macbook screen. any ideas how I can make this work on a lower res display?

5

change the file format from jpg to png and change the image size. i tested it in 300x250 layout, seems to work. the image 300x600 is in png format and is only 300 pixel wide instead of 417 pixel.
Pararekau Ads Offshore_.hype.zip (567.2 KB)

6

Thanks for the video, it clearly demonstrates non-subpixel rendering on Chrome.

While Firefox does not do subpixel rendering (at least very well, see bug), even on a non-retina screen I would expect Chrome to render this looking smoothly.

For example, if you try this Hype document that just animates a rectangle moving very slowly, does it look smooth to you?

SlowRectangle.hype.zip (14.7 KB)

If you look very closely (or use screen zoom) it should look like:

I'd guess that maybe Chrome is running in some state where it is falling back on a graphics mode that isn't doing subpixel rendering for some reason? I think the questions still remain on what OS you're using and also perhaps how your display setup is working. You may want to try a fresh macOS user account with default Chrome settings to see if there's any configuration issue too.