fix(css): ensure that iOS scroll lock only applies if print view is inactive

refs ibi-group/trimet-mod-otp#117

Author: landonreed

lib/components/app/print-layout.js

@@ -39,6 +39,23 @@ class PrintLayout extends Component {
     }
   }
 
+  /**
+   * Add print-view class to html tag to ensure that iOS scroll fix only applies
+   * to non-print views.
+   */
+  componentWillMount () {
+    const root = document.getElementsByTagName('html')[0]
+    root.setAttribute('class', 'print-view')
+  }
+
+  /**
+   * Remove class attribute from html tag on clean up.
+   */
+  componentWillUnmount () {
+    const root = document.getElementsByTagName('html')[0]
+    root.removeAttribute('class')
+  }
+
   render () {
     const { itinerary, companies } = this.props
     return (

lib/index.css

@@ -18,15 +18,17 @@
 
 /* PREVENT BOUNCE SCROLL ON iOS */
 @supports (-webkit-overflow-scrolling: touch) {
-  /* Fix this body and html to prevent bounce */
-  html,
-  body {
+  /* Fix the body and html to prevent bounce (only if print-view is not active) */
+  html:not(.print-view),
+  html:not(.print-view) body {
     position: fixed;
     overflow: hidden;
     font-family: Arial, Helvetica, sans-serif;
   }
-  /* Modify the root/main div to permit normal scrolling behavior */
-  #root, #main {
+  /* Modify the root/main div to permit normal scrolling behavior (only if
+  print-view is not active) */
+  html:not(.print-view) #root,
+  html:not(.print-view) #main {
     width: 100vw;
     height: 100vh;
     -webkit-overflow-scrolling: touch;