Strange behavior Safari

Something strange is happening. When using jQuery/animate Safari does not work properly, where Chrome does the job. Please see video captures.
I’m using Hype 4 and scaling is 100%. When scaling is disabled it works fine, but that’s not what I want.
Safari 1024x768:

Chrome 1024x768:

Safari 1366x1024:

Chrome 1366x1024:

When using iPhone layout there is no problem.

Does anyone know what’s happening here? This is important for me because I’m updating my apps.

Can you share your test document? How are you animating the objects moving left/right? (Also is there a reason why you’re using jQuery animate instead of Hype’s timeline?)

You might want to check ‘Position with CSS left/top’ in the document inspector?

test animate h4.hype.zip (48.4 KB)

Well, when starting it seemed less work, but in the end I guess I should have used timelines :cold_sweat:

This makes no difference.

I think the difference is that Chrome is zoom scaling the entire document (its responsive behavior) but Safari is not, and then Hype’s flexible layout is coming into effect. You can achieve the same result in Chrome if you don’t use responsive design mode.

Because you are using zoom scaling on the group, 140px will not correspond to the amount the elements have individually been scaled by. So if your document were half size (512px), the movement amount should be 70px to appear to move the same, but it is statically at 140px so will move double the amount.

The easiest solution would be to just put everything in a group set to zoom contents. This would intrinsically mean that a 140px move on an inner-item would get scaled correctly, because the scale isn’t happening on the group itself but above it.

1 Like

That is the solution. Thank you @Jonathan

1 Like