Jump to content
Search Community

CSS animation does not work on Iphones

antresoldo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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?

 

 

Link to comment
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.

Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...