Safari and iOS problems with animatons

I am running into some problems with animations. Everything is working fine on Chrome and Firefox with the animations. I I noticed that animations that slide from the left or right are causing the the window of the browser to scroll horizontally. Rather than containing everything in the window, you can slide to the right. It is almost as if my layout is wider than the browser. This is caused by, I believe, the animations - one of which has a booklet with a ‘fade-animation’ sliding from the right. The offset is 300px right and the duration is 1 second. People love the animations and would hate to give them up. I’m sure they can work well together. Maybe there is something I can do via CSS or JS to make things work. Once you scroll past the animations things see to snap into place and the horizontal scrolling is no more.

I have the website here. This is just a test site and temporary location for those looking at this post in the future. It will most likely be something different. Please replicate the issue on ipad, iphone, and Safari.
https://zcdemo.com/

Thanks

Hi there,

Thank you for writing in. We did indeed have the problem in the previous version which it makes the browser scroll horizontally on Safari, but we fixed it in the newest version. So please kindly update the theme to version 5.1.1.

But this use case may be different as you said it only happens with the Fade Animation. I also suggest that you also follow the workaround below:

Hope it helps.