title: React Webapp stays white on some iOS devices
body: <p>I'm driving crazy. I have a quite complex React Webapp with ES6 features in production. It's working just fine on every device on every Browser I know. Only problem occurs on an iPhone 7 Plus with iOS 12.1.4 either in Chrome and in Safari: The app just says white. What causes me headache is, that is does work on an current iPad in both browsers.
  Sadly I don't own an iPhone 7, so I'm unable to look at the dev console.</p>
  
  <p>I thought, that it might be an issue with some ES6 features not working in combination with the rendering engine. So I imported all polyfills I can imagine, but it still does not work. </p>
  
  <p>As I said the App is quite complex, so here are some extracts that might help to find the issue.</p>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "shortbox-react",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@babel/plugin-syntax-class-properties": "^7.2.0",
      "@babel/polyfill": "^7.2.5",
      "@material-ui/core": "^3.9.2",
      "@material-ui/icons": "^3.0.2",
      "@material-ui/lab": "^3.0.0-alpha.30",
      "apollo-cache-inmemory": "^1.5.1",
      "apollo-client": "^2.5.1",
      "apollo-link-context": "^1.0.14",
      "apollo-link-http": "^1.5.11",
      "apollo-upload-client": "^10.0.0",
      "dateformat": "^3.0.3",
      "expand-tilde": "^2.0.2",
      "formik": "^1.5.1",
      "formik-material-ui": "0.0.16",
      "graphql": "^14.1.1",
      "graphql-tag": "^2.10.1",
      "hamburgers": "^0.8.1",
      "js-sha256": "^0.9.0",
      "notistack": "^0.4.3",
      "react": "^16.8.3",
      "react-apollo": "^2.5.1",
      "react-autosuggest": "^9.4.3",
      "react-cookie": "^3.0.8",
      "react-dom": "^16.8.3",
      "react-hamburgers": "^1.0.0",
      "react-images": "^0.5.19",
      "react-router-dom": "^4.3.1",
      "react-router-last-location": "^1.1.0",
      "react-router-scroll-4": "^1.0.0-beta.2",
      "require-uncached": "^2.0.0",
      "recompose": "^0.30.0",
      "yup": "^0.26.10"
    },
    "devDependencies": {
      "react-scripts": "^2.1.5",
      "typescript": "^3.3.3333"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": [
      "&gt;0.2%",
      "not dead",
      "not ie &lt;= 11",
      "not op_mini all"
    ]
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  
      &lt;meta
              content="minimum-scale=1, width=device-width, initial-scale=1, shrink-to-fit=no"
              name="viewport"
      /&gt;
      &lt;meta content="#000000" name="theme-color"/&gt;
  
      &lt;link href="%PUBLIC_URL%/manifest.json" rel="manifest"/&gt;
      &lt;link href="%PUBLIC_URL%/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57"&gt;
      &lt;link href="%PUBLIC_URL%/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60"&gt;
      &lt;link href="%PUBLIC_URL%/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72"&gt;
      &lt;link href="%PUBLIC_URL%/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76"&gt;
      &lt;link href="%PUBLIC_URL%/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114"&gt;
      &lt;link href="%PUBLIC_URL%/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120"&gt;
      &lt;link href="%PUBLIC_URL%/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144"&gt;
      &lt;link href="%PUBLIC_URL%/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152"&gt;
      &lt;link href="%PUBLIC_URL%/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180"&gt;
      &lt;link href="%PUBLIC_URL%/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png"&gt;
      &lt;link href="%PUBLIC_URL%/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"&gt;
      &lt;link href="%PUBLIC_URL%/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png"&gt;
      &lt;link href="%PUBLIC_URL%/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"&gt;
      &lt;meta content="#ffffff" name="msapplication-TileColor"&gt;
      &lt;meta content="./favicon/ms-icon-144x144.png" name="msapplication-TileImage"&gt;
  
      &lt;title&gt;Shortbox&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
  &lt;div id="root"&gt;&lt;/div&gt;
  &lt;!--
    This HTML file is a template.
    If you open it directly in the browser, you will see an empty page.
  
    You can add webfonts, meta tags, or analytics to this file.
    The build step will place the bundled scripts into the &lt;body&gt; tag.
  
    To begin the development, run `npm start` or `yarn start`.
    To create a production bundle, use `npm run build` or `yarn build`.
  --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import "@babel/polyfill";
  import 'core-js/es6/map';
  import 'core-js/es6/set';
  import 'raf/polyfill';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import ApolloClient from "apollo-client";
  import './index.css';
  import App from './components/App'
  import {ApolloProvider} from "react-apollo";
  import CookiesProvider from "react-cookie/cjs/CookiesProvider";
  import {Cookies} from 'react-cookie'
  import {SnackbarProvider} from 'notistack';
  import {InMemoryCache} from 'apollo-cache-inmemory';
  import {setContext} from 'apollo-link-context';
  import {BrowserRouter} from "react-router-dom";
  import {ScrollContext} from 'react-router-scroll-4';
  import {LastLocationProvider} from "react-router-last-location";
  import Button from "@material-ui/core/Button/Button";
  import {createUploadLink} from "apollo-upload-client";
  
  const uploadLink = createUploadLink({
      uri: 'http://localhost:4000'
  });
  
  const authLink = setContext((_, {headers}) =&gt; {
      let cookies = new Cookies();
  
      let token;
      let session = cookies.get("session");
      if (session)
          token = cookies.get("session").id + ":" + cookies.get("session").sessionid;
  
      return {
          headers: {
              ...headers,
              authorization: token ? `${token}` : "",
          }
      }
  });
  
  const client = new ApolloClient({
      link: authLink.concat(uploadLink),
      cache: new InMemoryCache()
  });
  
  ReactDOM.render(
      &lt;BrowserRouter&gt;
          &lt;LastLocationProvider&gt;
              &lt;ScrollContext&gt;
                  &lt;SnackbarProvider maxSnack={3}
                                    action={[
                                        &lt;Button key="hide" className="snackbarbtn" color="primary" size="small"&gt;
                                            Verbergen
                                        &lt;/Button&gt;
                                    ]}&gt;
                      &lt;CookiesProvider&gt;
                          &lt;ApolloProvider client={client}&gt;
                              &lt;App /&gt;
                          &lt;/ApolloProvider&gt;
                      &lt;/CookiesProvider&gt;
                  &lt;/SnackbarProvider&gt;
              &lt;/ScrollContext&gt;
          &lt;/LastLocationProvider&gt;
      &lt;/BrowserRouter&gt;,
      document.getElementById('root')
  );
  </code></pre>
  
  <p>These extracts are from my dev environment, so don't wonder about the dev setup. :)</p>
  
  <p>I am building with</p>
  
  <pre><code>REACT_APP_ENV=production npm run build
  </code></pre>
  
  <p>Any idea, why it does not work on that specific device. I am clueless.</p>
  
  <p>Thanks in advance!</p>