Add Smooth Scrolling Polyfill

Author: consindo

js/app.jsx

@@ -1,4 +1,3 @@
-// js
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
@@ -9,6 +8,9 @@ import Index from './views/index.jsx'
 import injectTapEventPlugin from 'react-tap-event-plugin'
 injectTapEventPlugin()
 
+import smoothscroll from 'smoothscroll-polyfill'
+smoothscroll.polyfill()
+
 class App extends React.Component {
   render() {
     return (

js/stores/uiStore.js

@@ -44,7 +44,8 @@ export class uiStore extends Events {
         const link = document.createElement('link')
         link.setAttribute('rel', 'stylesheet')
         link.setAttribute('href', '/' + data[file])
-        document.head.append(link)
+        const ref = document.querySelector('link')
+        ref.parentNode.insertBefore(link, ref)
         this.state.downloadedCss[file] = link
       })
     })

js/views/index.jsx

@@ -46,7 +46,9 @@ class Index extends React.Component {
     this.scrolllock = false  // used so you know the difference between scroll & transform
 
     window.onresize = function() {
-      document.body.style.setProperty('--real-height', document.documentElement.clientHeight + 'px')
+      requestAnimationFrame(() => {
+        document.body.style.setProperty('--real-height', document.documentElement.clientHeight + 'px')
+      })
     }
   }
   componentDidMount() {

package-lock.json

@@ -84,6 +84,7 @@
     "resolve-url-loader": "^2.1.0",
     "rimraf": "^2.6.2",
     "sendgrid": "^4.3.0",
+    "smoothscroll-polyfill": "^0.4.0",
     "stream-transform": "^0.1.2",
     "style-loader": "^0.18.2",
     "webpack-dev-server": "^2.9.3",

package.json

@@ -75,6 +75,7 @@ $transition: 250ms ease transform;
   }
 
   .root-card-content {
+    box-sizing: border-box;
     width: 100%;
   }