Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
antresoldo

CSS animation does not work on Iphones

Recommended Posts

Hello!

Any css animation inside block with applied Draggable does not work on Iphone 8, Iphone X, Ipad Pro. Example: https://designgovno.ru/gsap-scroll/

The blue rectangle is not inside the block and it rotates. The red rectangle is inside the block and it is not. Everything works on desktops and Android.

JS:
Draggable.create(".scroll", {
  type: "scroll",
  edgeResistance: 0.5,
  throwProps: true
});

Does anyone know how to resolve this problem?

 

 

Share this post


Link to post
Share on other sites

Very interesting. Thanks for the report, antresoldo! Definitely something quirky going on with Safari. It doesn't initially update (visually) in Safari on Mojave for me.

 

When I switch tabs away from Safari (so that another window is covering the whole Safari window) and go back to it, it starts working.

 

Also, if I refresh the page (so it's not animating) and then click the draggable (or hover over the element in the developer tools) repeatedly, it will update the visual state in ticks. 

 

Note that this is definitely not an issue with GSAP - it has something to do with Safari's rendering. Maybe we can figure out a workaround though.

Share this post


Link to post
Share on other sites

Yeah, that's pretty odd indeed - it seems to work great if you switch from CSS to using GSAP to animate it. Yet another reason to use GSAP ;)

 

My guess is that it has to do with compositing layers and maybe how CSS animations get spun off to a different thread - sometimes that's actually a BAD thing. Having it all synced up with frame refreshes/ticks (main thread) can be good. You could try animating something else ALSO that's not transform-related, just to see if that'll force Safari to repaint the screen and mark that element as "dirty" (needs repainting). 

 

I wish I had a silver bullet for you...other than just using GSAP for the animation :)

 

  • Like 2

Share this post


Link to post
Share on other sites

True. Though, that is not only safari-related. I encounter the same problem in chrome, firefox and some other webkit browsers on latest apple mobile and tablet devices.

Share this post


Link to post
Share on other sites
9 minutes ago, igormakovsky said:

I encounter the same problem in chrome, firefox and some other webkit browsers on latest apple mobile and tablet devices.

Believe it or not, all mobile browsers on iOS use the same rendering engine (mobile Safari's). So it's likely a bug in that rendering engine.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×