Scrollmagic: Page inside iframe does not work (iOS Safari/Chrome only)

[Brandoning]

Setup
index.html which iframes in to app.html with a header/footer at the bottom
30 stacked bands one after another which all use the pin feature initialized with:

   this.smScene = new ScrollMagic.Scene({
            tweenChanges: true,
            triggerElement: '.page[data-page="'+bandIndex+'"]',
            triggerHook: "onLeave",
            duration: "400%"
    })
    .setPin('.page[data-page="'+bandIndex+'"]');

Issue

This is a simulated device using xcode, but on the real device the same happens. The pin spacers are all set to millions of pixels and the scrolling and content doesn't work as intended.

The iFrame is set to 80vh... Which might cause a problem but I set it to 800px and that produces the same results.

Happens only in iOS not in Android. It also doesn't happen on the Safari web browser, that works fine.

Workaround
Remove the iFrame from the equation and directly go in to app.html. Now it works fine.

[Brandoning]

Update: After implementing multiple solutions to fix the iframes height, which can be found here it is almost working. I might have to write a media query for each device to fix this, since it relies on a wrapping div having a height/width and overflow scroll to navigate the iframe. And then also a full page wrapper inside the iframe page implementing position fixed to stop automatic content sizing. Another challenge will be isolating these fixes to only iOS...

Will leave open for any questions and close after a few weeks.

[Brandoning]

Issue closed, after working for many weeks on this please avoid this library if you plan to make it work in iOS.

We solved the iFrame issues, but iOS (especially Safari) is a mess. The only solution is to have a static version in iOS.

The menu bars jumping in Safari when scrolling back up the page messes with so many things that it's not worth your time to fix it.