Elements disappear on iphone

[bj-mcduck]

I have an iphone 5 running 8.0.2. We're using snapjs and ratchet. When our content is long enough to be scrollable, everything appears as expected; when our content changes, and is not longer than the viewing area, all the elements disappear.

This appears to be something to do with -webkit-overflow-scrolling, I notice that both snapjs and ratchet use it for their content areas. Not sure if there is a problem with them being double implemented.

I created a jsbin to illustrate: http://jsbin.com/yeficiyeca/2 Currently when removing some content in this example, the footer disappears. But on our site it's all the content in the content area.

[bj-mcduck]

We are also using ember, so I'm not sure if it has something to do with all the content within the .snap-content section being loaded/changed asynchronously.

[LavaRiddle]

Quite a while later after this issue was opened. Casting your mind back @brandonjmckay did you get manage to resolve this issue. Experiencing the same thing here on iOS devices only.

[esitarz]

Ran into a similar issue on portrait tablet where <snap-content> hid everything on my screen. I could rotate my iPad landscape, then BACK to portrait and it would magically appear. Narrowed the culprit down to this declaration:

.snap-content, .snap-drawer, .x-snap-drawer, [data-snap-drawer],
[snap-drawer], [snap\:drawer], [x-snap-drawer], snap-drawer {
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     -moz-overflow-scrolling: touch;
     -o-overflow-scrolling: touch;
}

I ended up writing a media query to override to overflow: visible; on tablet/mobile.