IScroll not working if contents are 100% height?

Question

I'm using IScroll on a page that makes heavy use of ScrollMagic, but cannot for the life of me get IScroll to function. The primary issue appears to be that most (but not all) of the elements in the page need to take up 100% of the viewport's height, since they are set up as slides with some complex animations inside of them. In order for height: 100% to work, however, all the parent elements must be set the same. This is causing IScroll to calculate the height of the wrapper element at the viewport height, and thus it thinks there's no more content beyond that. I'm working on a jsfiddle to test/demonstrate the problem, but wondered if anyone else had run into a similar situation before.

Answer 1

The problem is that the height is always calculated relative to the next offset parent.
Since the inner iScroll wrapper must be positioned relative it is every child's offset parent and thus the basis for their height calculation.

There is a simple workaround though:
Instead of height: 100% use height: 100vh in your CSS.
Viewport units is something only few people seem to know about even though support for it is absolutely sufficient: http://caniuse.com/#feat=viewport-units

hope this helps,
J