ScrollMagic Disappearing pinned sections on iPad

I was designing a page with Scrollmagic and when testing on iPad, noticed that the pinned sections disappeared until the scroll was finished. However, elements within those pinned sections which scaled and animated would appear/disappear. Which made me realize - make sure they are rendered with the GPU and you are golden. So, for the pinned element, just apply something like: will-transform: translate; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);

This will cause the GPU to render things and it will work flawlessly on iOS.

You may want to update your examples to include this, since they also suffer from the same problem. Since I found a simple fix, I thought I'd share!

Nov 23 '15 16:11 adennis

Thanks for sharing! Worked like a charm :)

Dec 11 '15 18:12 mbtrueman

Thanks ! Worked for me also.

Jul 13 '16 08:07 ravitdx

Thank you for this. Worked beautifully for me as well.

Sep 08 '16 20:09 ammon-lockwood

Thanks! Was wondering what that happened!

Oct 06 '16 04:10 vm6ej04

will-transform isn't a valid CSS property? Do you mean will-change instead? Which would be used like will-change: 'transform';.

Tested this solution on iOS10 and doesn't seem to be working.

Nov 13 '16 21:11 olivertappin

Same question as @olivertappin here... Fix is not working on my iPhone... Any news on this?

Jan 07 '17 21:01 simonwidjaja

@olivertappin @simonwidjaja Sorry about that, I think I made a typo in the original post with regards to will-change. However, I also since discovered that using will-change isn't necessary. Simply applying the translate3d transform should be sufficient:

transform: translate3d(0,0,0);

Does that not work for you?

Jan 07 '17 21:01 adennis

@adennis I encountered this issue but, sadly, your transform: translate3d(0,0,0); fix didn't work for me.

Any ideas @olivertappin @adennis @simonwidjaja ?

Jan 31 '17 22:01 nicktobolski

Eureka! I had to apply that to all of the child elements explicitly.

Feb 01 '17 15:02 nicktobolski

Hi @olivertappin @adennis @simonwidjaja @adennis and thank you for this thread. I probably face a problem similar to yours.

I am currently working on a one page with a pinned section in which I play a GSAP timeline. Everything works fine except Safari on iOS (including the latest version). The trigger hook scrolls up at the same time as the page and thus never triggers the scene ¯ \ _ (ツ) _ / ¯ ...

➡ To illustrate the problem, I have created this minimalist codepen. The second section has a pinned element, but it is never fixed during the scroll (on iOS only). This demo is free of relative values (vh, percentage or js value). So I think I must miss something...

Do you have a clue? Regards.