side nav and app bar issues on iOS

[indirectlylit]

Observed behavior

• app bar becomes detached while scrolling (see ios momentum scrolling not working #2279, Allow app bar to scroll offscreen on mobile #4612)
• clicking hamburger icon doesn't work

Expected behavior

• side nav should be accessible and app bar

User-facing consequences

cannot use app

Steps to reproduce

load in iOS, click and scroll

This can be reproduced in browserstack on iOS, but only using http://kolibribeta.learningequality.org (not localhost - see #4826)

Context

0.12

[jonboiser]

The bar moves to the left when the scrolling changes position from fixed to absolute during the scroll. This probably happens because the page is usually bigger than the viewport.

On the profile page, where the main area isn't wider than the viewport, I don't see it move.

[jonboiser]

As for the hamburger button not working, I think it's the 'scrolling-pane' class interfering with the Side Nav appearing. In browserstack, if you remove the 'scrolling-pane' class from the main div, side-nav appears when you click the hamburger.

[jonboiser]

On Browserstack Chrome, clicking the search magnifying glass button doesn't work either.

[jonboiser]

Removing the -webkit-overflow-scrolling: touch; // iOS momentum scrolling rule from .scrolling-pane seems to fix it.

[indirectlylit]

okay, let's do that then and re-open #2279

[indirectlylit]

fixed when #5100 is merged