iOS swipe left when opened moves whole screen

[paulbarroso]

Hi, not sure if anyone noticed but once the side bar is opened sometimes when you swipe left on the side bar the whole screen moves like if the rest of the page was just there. I tried something like: $("#sidebar").on("swipeleft", this.preventEvent); //hammer.js library for events $("#sidebar").on("dragleft", this.preventEvent); But this doesn't seem to fix the issue. I still get the same problem intermittently on the demo and on my code. Not sure if there is an issue with something like overflow-x?

It works perfect on Android and I've just managed to reproduce this on iOS. Any ideas?

[matmac]

Same thing here, if you have an object with scroll capabilities below the "snapped" element, when you try to scroll those elements the whole screen can be moved, like paulbarroso y think it has something to do with the overflow.

[davgothic]

I can confirm this is an issue with both iPhone and iPad. Android devices appear to be unaffected.

[jakiestfu]

@matmac @davgothic I'm a little confused. I think @paulbarroso was talking about left and right swiping issue, not scrolling below snapped elements.

Does this repo help any of the issues described above? https://github.com/jakiestfu/AppScroll.js

[davgothic]

@jakiestfu I believe I've got the same issue as @paulbarroso. You can see it on your demo on an iPad/iPhone.

If you open the sidebar and then put your finger down on the sidebar and pull left it'll peek off the screen by maybe 20 or so pixels, on the app I'm working on it goes right off screen and messes up future open/close positions of the sidebar.

I've only managed to get your demo to scroll the whole side menu offscreen once and am not sure how to reproduce the issue on the demo over and over.

Also this only appears to happen on a left sidebar.

[davgothic]

I'm not certain but this seems to only happen when the left sidebar has enough vertical content to scroll.

[matmac]

davgpothic, you're right, it happens only when the left sidebar has scrollable content.

[mederic38]

Same problem here, the entire page is scrollable when the menu is open and we scroll left inside the menu. I tried to fix with overflow-x:hidden in my css but I still got the same behaviour. It mess up the all screen. Any way to fix this ?

[andreaslindahl]

I have the same problem. Any suggestions on how to fix this?

[rehmondo]

@andreaslindahl I've managed to avoid it by adding https://github.com/jakiestfu/AppScroll.js/ - I wanted to have a fixed header in my app anyways - but you can nicely scroll the main content vertically, slide the menu etc no problems with the entire page being dragged.

I did discover on my own page part of the horizontal scrolling occurred because of a < li > width that was inherited as 100% which I had also added a margin-left to.

A good way to test if your horizontal scrolling is caused by a similar problem is to open up your page on a computer and reduce the window size (to min mobile dimensions) - I used chrome > dev tools to hover over each element and once the dev tool highlighted it (complete element inc it's width is highlighted) I was able to determine where the fault lay on my page.

[mederic38]

Still have the problem, it occurs mostly when the vertical content is bigger than the screen. I already set overflow-x : hidden and tried a lot of things but it still not work. Anyone managed to fix this ?

[scottgallant]

I'm having this issue, but it only happens some of the time. It seems to happen when I swipe right, while the menu is open, then when I swipe left (on the menu, not the content). See images.

[jakiestfu]

Try setting your body or container element to have overflow-x: hidden;

[scottgallant]

Thanks for the suggestion, but it doesn't help unfortunately. See a video of it here: http://www.youtube.com/watch?v=gaKZB7Z6vyc&feature=youtu.be

[scottgallant]

When I first open the menu, I can't drag it away from the left edge of the view finder (no horizontal "website dragging"). Eventually I can drag it horizontally away from the left edge of the view finder and that's when the problem starts happening.

[tschleuss]

Use overflow-x: hidden; in .snap-drawers css selector

.snap-drawers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  overflow-x: hidden;
}

[KoenJacobs]

Anny working fixes on this one yet? I'm having the same issue on my android device:

• If you open the sidebar and then put your finger down on the sidebar and pull left it'll peek off the screen by maybe 20 or so pixels.
• This only happens to the left sidebar
• This only happens when you open the left sidebar by dragging, it doesn't happen when you open the sidebar using the button
• None of the above fixes have worked for me so far

Snap.js works like a charm if this little bug can be fixed :)

[tomasbedrich]

I fixed this bug by clipping the content using JavaScript. Then the browser doesn't have a chance at all to draw the overflowing content badly.

snapper.on('animated', function() {
    if ( snapper.state().state == 'left')
        $('#content').css('clip', 'rect(0px, ' + (window.innerWidth - $('#side-menu').outerWidth()) + 'px, auto, 0px)');
});
snapper.on('start', function() {
    $('#content').css('clip', '');
});

[DimoStoyanov]

This has been fixed pretty easy.

"So setting overflow: hidden on the drawer and content elements does the trick. You can also achieve roughly the same thing by setting position: fixed on both elements, then just having the content inside of each element scroll. "

[imandic]

I'm having this 20px problem for days. I'm working on PhoneGap application, simple one, left is menu with few dynamically generated points, right is content. No fixed toolbars, no fancy animation. Sometimes I can put finger on menu and move whole menu AND content to the right. And when I try to take it back on left, the gap appears on right side (it's almost the width of menu, on some devices it's black, on some is white)

I have tried everything, positon:fixed, overflow:hidden, but without success. Tried 2.0rc1, iScroll, clipping content...Tried on 6 different android devices.

BUT, if I disable left drawer and put menu in right, everything working great. No "20px" scroll, no sliding content when I swipe left or right in menu.

Someone with more JS knowledge should examine snap.js, I'm not to good in coding but there's should be something wrong when left menu is bad but right one working great?