Веб-страница React JS не открывается в iPhone 7 Chrome

Question

У меня есть эта веб-страница. Эта страница написана в реакции. При загрузке по умолчанию отображается текст "Загрузка". Затем он делает запрос к серверу на основе данных и отображает информацию.

В браузере iPhone 7 Chrome эта страница не выходит за рамки представления "Загрузка". Он даже не делает запрос сервера на получение данных.

Эта страница открывается в Safari на том же телефоне. Он хорошо работает в браузере Chrome на настольных компьютерах, Samsung, One Plus, Moto G, iPhone 6.

Код ниже. Есть идеи, почему iPhone 7 даже не делает запрос к серверу?

Вот код реакции на это:

import React from 'react';
import {render} from 'react-dom';
import 'whatwg-fetch';
import Job from './jobs.jsx';
import axios from 'axios';
import Moment from 'react-moment';
import moment from 'moment';
const queryString = require('query-string');
const apiURL = "http://....../api/resources/";
const apiToken = "........";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {cjp:{}, msg:{message:'Loading'}};
    this.confirm = this.confirm.bind(this);
  }

  componentDidMount() {
      const parsed = queryString.parse(location.search);
      console.log(parsed);
    fetch(apiURL + 'response/getDetails/',
        {
          method: 'POST',
            mode:'cors',
            credentials: 'same-origin',
            body: JSON.stringify({
                'id': parsed.cjp,
                'stage': parsed.stage
            }),
          headers: {
              'Access-Control-Request-Method':'GET, OPTIONS, HEAD, PUT, POST',
              "Access-Control-Request-Headers": "X-Custom-Header, X-Auth-Token, Content-Type",
              'Accept': 'application/json',
            'content-type':'application/json;',
            'X-Auth-Token': apiToken
          }
        })
      .then(response => {
            return response.json();
        }).then(function(json) {
            if(json.code == 400) {
                this.setState({msg: json});
            } else {
                this.setState({cjp: json})
            }
        }.bind(this))
        .catch(function(ex) {
            console.log('parsing failed', ex)
        });
  }

    confirm() {
        var cjp = this.state.cjp;
        var currentTimestamp = moment().format("YYYY-MM-DD HH:mm");
        fetch(apiURL + 'response/confirm/',
            {
                method: 'POST',
                mode:'cors',
                credentials: 'same-origin',
                body: JSON.stringify({
                    'id': cjp.id,
                    'stage': cjp.stage,
                    'candidateFeedback': {
                        'ivConfirm':true,
                        'ivConfirmTimestamp':currentTimestamp
                    }
                }),
                headers: {
                    'Access-Control-Request-Method':'GET, OPTIONS, HEAD, PUT, POST',
                    "Access-Control-Request-Headers": "X-Custom-Header, X-Auth-Token, Content-Type",
                    'Accept': 'application/json',
                    'content-type':'application/json;',
                    'X-Auth-Token': apiToken
                }
            })
            .then(response => {
                return response.json();
            }).then(function(json) {
                if(json.code == 400) {
                    this.setState({msg: json});
                } else {
                    this.setState({cjp: json})
                }
            }.bind(this))
            .catch(function(ex) {
                console.log('parsing failed', ex);
        });
    }

  render() {
        var cjp = this.state.cjp;
        var msg = this.state.msg;
        var txtMsg = "Loading....";
      if(msg !== undefined && msg.code !== undefined && msg.code == 400) {
          txtMsg = "Your interview date has passed";
      } else {
          if(cjp.feedback !== undefined && cjp.feedback.ivConfirmTimestamp !== undefined) {
              txtMsg = "See you there!";
          } else if (cjp.candidate !== undefined && (cjp.feedback == undefined || cjp.feedback.ivConfirmTimestamp == undefined)) {
              txtMsg = "Confirm your presence!";
          }
      }
        return (
            <div className="container-fluid">
                <div className="row">
                    <table className="table table-responsive" style={{backgroundColor: '#fff3f3'}}>
                        <tbody><tr>
                            <td style={{backgroundImage: 'url(https://images.designtrends.com/wp-content/uploads/2015/11/13153143/Beautiful-Grey-Background.jpg)',backgroundSize:'100% 100%', padding: 20}}>
                                <table width="90%" className="table table-responsive " width="90%" style={{borderTopRightRadius: 6, borderTopLeftRadius: 6, backgroundColor: 'rgb(254, 82, 88)'}}>
                                    <tbody><tr>
                                        <td width="100%">
                                            <table width="100%" style={{marginTop: '20px', padding: '20px 0px', borderCollapse: 'collapse'}}>
                                                <tbody>
                                                <tr>
                                                    <td style={{paddingBottom: 20, textAlign: 'center', fontSize: 35, color: '#ffffff'}}>
                                                        <strong>{txtMsg}</strong>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
.
.
.
.
.
.
.
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        );
  }
}

render(<App/>, document.getElementById('rh-confirm'));

Мой HTML выглядит так:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hexagon Executive Search</title>
  <meta name="description" content="Hexagon Executive Search" />
  <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <style>
    .table {
      margin: auto;
      vertical-align: top;
    }
    .width90{
      width:90%;
    }
    .darkGreyText{
      color:#464646;
    }
    .table > tbody > tr > td{
      border-top-width: 0px;
      border-top-style: solid;
      border-top-color: rgb(221, 221, 221);
    }
  </style>
</head>
<body>
<div id="rh-confirm"></div>
<script src="public/bundle.js"></script>
</body>
</html>