Scrollmagic: Scrolling causes all content to disappear on Safari iOS but works on desktop?

[pmeyers]

I have two divs (with a small amount of content in each) that I want to scroll using a parallax effect. Each element (headlines, image, paragraphs) should scroll independently while the parent divs are pinned. I have it working on desktop Safari and Chrome, but when I view it in iOS Safari (updated to the latest public release) all of the content disappears while I scroll:

http://heroic-labs.com/scrollmagic-disappears/

Only the red body shows up while scrolling. This happens with both divs and the content appears when scrolling stops. I believe it works correctly on Android. I tried integrating iScroll but that introduced several formatting problems in my full project, so I was hoping to fix whatever problem I've made in my ScrollMagic JS.

I've been working on this for several weeks with no luck and I've been pulling my hair out trying to get it fixed, so any help would be greatly appreciated. I have tried stripping everything out except the appropriate markup and code for these two divs, but if I need to show anything else or present it differently just let me know.

[pmeyers]

It appears forcing hardware acceleration fixes the problem. I thought I had tried that already, but I guess I hadn't done it or I hadn't done it correctly. I'm sure it's been mentioned a ton of times, but I used the following on my content slides CSS:

    -webkit-transform: translate3d(0, 0, 0);

I also saw https://davidwalsh.name/translate3d suggest trying

    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;

if you're still having issues. I'm going to leave this open for a little bit longer if anyone else has any other tips and then I'll close it.

[steadyzeus]

when i ues iscroll then i got the problem.

just see

https://github.com/cubiq/iscroll

options.useTransition
iScroll uses CSS transition to perform animations (momentum and bounce). By setting this to false, requestAnimationFrame is used instead.

On modern browsers the difference is barely noticeable. On older devices transitions perform better.

Default: true

options.HWCompositing
This option tries to put the scroller on the hardware layer by appending translateZ(0) to the transform CSS property. This greatly increases performance especially on mobile, but there are situations where you might want to disable it (notably if you have too many elements and the hardware can't catch up).

Default: true

If unsure leave iScroll decide what's the optimal config. For best performance all the above options should be set to true (or better leave them undefined as they are set to true automatically). You may try to play with them in case you encounter hiccups and memory leaks.