Experiment with some more ways to render bars in non-fixed way

[nickschot]

Below is a bar variant which seems to work without glitches in mobile Chrome. More thought on the implications of a position fixed wrapper div is needed.

<div style="position: fixed; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden">
  <div style="height: 50px; background: red;"></div>
  <div style="height: calc(100% - 100px); background: grey; overflow-y: auto;">
    <div style="height: 300vh; width: 20vw; margin-left: 20vh; background: green;">
      Test
    </div>
  </div>
  <div style="height: 50px; width: 100%;background: yellow;"></div>
</div>

[nickschot]

This approach does fully disable the hiding address bar in mobile chrome.

[nickschot]

This might also have implications for hiding a bar.