Scrolling is janky on iOS

[jerelmiller]

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]

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

[jbuget]

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]

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/