[Solved] Mobile emulator mode cannot scroll down in Chrome Dev Tools

[christoferd]

Issue/bug: While testing in Mobile view (using developer tools) I'm unable to scroll down.
Title: Mobile emulator mode cannot scroll down in Chrome Dev Tools

Reproduce:

• Fresh install, Windows Herd auto installer
• Visit dashboard page in browser
• Press F12 (open developer tools panel)
• Switch to mobile/responsive view and select a mobile from the preset list
• Try to scroll down, notice that there is an issue here

[Solved partially] Issue is somewhat caused by zoom in dev tools mobile emulator, see response below with screenshots

[bobbyiliev]

Hi,

Interesting, seems to be working for me:

Which theme are you using? Do you see any errors in the logs? Any other additional info might be helpful.

[christoferd]

[Solved partially] Issue is somewhat caused by zoom in dev tools mobile emulator, see response below with screenshots

PS: I don't know if this has to do with the meta "viewport" settings, or a CSS setting, or an issue with Google Dev Tools

75%

Setting 75% zoom in Dev Tools the form fits into the boundaries, so there is no need to scroll

100%

Setting 100% zoom in Dev Tools the shell of the phone does not fit into my browser space, the form does not fit into the boundaries, there's no scroll bar outside the simulator.
Note that the viewport is scrollable, if I try to scroll a scrollbar appears, just that it's the full height.

150%

Same issue

Video

[bobbyiliev]

Ok thanks for the extra details, this isn't actually a bug with Wave in any way but rather standard behavior for any website that fits entirely within the screen. When the content of a page doesn't exceed the viewport size, there's simply nothing to scroll, so the scrollbar doesn't appear.

To demonstrate, here's an example with Twitter showing the exact same behavior:

This behavior occurs because the page content fits perfectly on the screen without requiring scrolling.