iOS amp double-html hack

ios-amp.js

import { oneLineTrim }  from 'common-tags';

// Create wrapper.
const htmlInner = document.createElement('html');
const htmlOuter = document.documentElement;
htmlInner.id = 'i-html-wrapper';
// Setup classes and styles.
htmlInner.className = htmlOuter.className;
htmlOuter.className = 'iOSfix';
// const height = window.innerHeight;
htmlOuter.setAttribute('style', oneLineTrim`
  overflow: hidden;
  height: 100vh;
  -webkit-overflow-scrolling: touch;
  position: static;
`);
htmlInner.setAttribute('style', oneLineTrim`
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
`);
// Attach wrapper straight inside the document root.
htmlOuter.appendChild(htmlInner);
// Reparent the body.
const bodyOrig = document.body;
bodyOrig.setAttribute('style', oneLineTrim`
  position: relative;
  height: 100vh;
`);
htmlInner.appendChild(bodyOrig);
Object.defineProperty(document, 'body', {
  get: () => bodyOrig
});

// Fixed layer voodoo
const bodyFixed = document.createElement('body');
bodyFixed.id = 'i-fixed-body';
bodyFixed.setAttribute('style', oneLineTrim`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1000;
`);
document.documentElement.appendChild(bodyFixed);
const fixedWindow = document.querySelector('.search-window');
fixedWindow.setAttribute('style', oneLineTrim`
  pointer-events: initial;
  display: block;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
`);
bodyFixed.appendChild(fixedWindow);


const mask = document.createElement('div');
mask.setAttribute('style', oneLineTrim`
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: #000;
  opacity: .3;
  z-index: 500;
`);
bodyOrig.appendChild(mask);
mask.addEventListener('touchmove', event =>
  event.preventDefault()
);