Panel margins resizing on Facebook mobile browser etc

[phocks]

@joshduck brought a bug to us relating to scrolling back and forward in the Facebook in app browser. The viewheight changes when you scroll back up the page and so the top and bottom margins between the panels change and break the flow of the page.

The effect gets worse the further down the page you are.

Here's some code I used to do a dirty fix in the past

// Override the viewheight vh margins to prevent jumping on mobile scroll changing directions
let blockArray = document.getElementsByClassName("Block-content");

for (var i = 0; i < blockArray.length; i++) {
  blockArray[i].style.marginTop = screenHeight / 2 + 64 + "px";
  blockArray[i].style.marginBottom = screenHeight / 2 + 64 + "px";
}

// Top and bottom have full length margins
blockArray[0].style.marginTop = screenHeight + "px";
blockArray[blockArray.length - 1].style.marginBottom = screenHeight + "px";

[phocks]

This was the story in question http://www.abc.net.au/news/2018-05-07/kings-cross-rape-case-that-put-consent-on-trial/9695858

[phocks]

This might work (also from @joshduck) https://github.com/rodneyrehm/viewport-units-buggyfill