search

jakiestfu / Snap.js

A Library for creating beautiful mobile shelfs in Javascript (Facebook and Path style side menus)
http://jakiestfu.github.io/Snap.js/
5.99k stars 663 forks source link

Elements disappear on iphone #242

Open bj-mcduck opened 9 years ago

bj-mcduck commented 9 years ago

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 commented 9 years ago

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 commented 6 years ago

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 commented 5 years ago

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.