search

adopted-ember-addons / ember-burger-menu

An off-canvas sidebar component with a collection of animations and styles using CSS transitions
https://adopted-ember-addons.github.io/ember-burger-menu/
MIT License
278 stars 47 forks source link

Scrolling is janky on iOS #63

Open jerelmiller opened 7 years ago

jerelmiller commented 7 years ago

When using this on an iOS device, the scrolling seems a bit janky for the main content area. The hardware-accelerated scrolling is no longer there. I also notice that the typical iOS trick by tapping the iOS status bar to scroll all the way up to the top does not currently work.

Tested with iOS 10 in Safari and Chrome

I've done a bit of inspection myself and it seems like the problem originates from the height: 100vh; overflow: hidden; property on one of the components.

offirgolan commented 7 years ago

@jerelmiller thanks for bringing this to my attention. I'll look into it sometime this week/weekend.

jbuget commented 6 years ago

I found a clean solution on this site : https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/.

In your html& body classes definition, just add Webkit property -webkit-overflow-scrolling: touch : 

body,
body > .ember-view,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  /* some global styles ... */
  -webkit-overflow-scrolling: touch;
}

See also : https://developer.mozilla.org/fr/docs/Web/CSS/-webkit-overflow-scrolling

knownasilya commented 6 years ago

I've also seen opening the menu happening from the middle of the screen, causing issues when using something like a map. Panning the map around would randomly open the menu. Is this maybe related? Can be tested here: http://gloucesterma.beta.mapgeo.io/