White page displayed in deployment only in new browsers

Hey Everyone. New deveoloper here.

My first app displays fine on older Macs but not on iPhones or new Mac models. What could be the cause of this? I've been trolling web pages for hours and found nothing that makes any sense to me. Please can anyone help!

here is my app.js

import logo from './logo.svg';
import './App.css';
import MetaMaskModal from './components/MetaMaskModal'
import Home from './components/Home'

function App() {
let provider = window.web3 && window.web3.currentProvider.isMetaMask;
return (
<>
{window.web3 === undefined ? (

) : ()
}
</>
);
}

export default App;

here is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(


,
document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

package.json

"homepage": "http://www.mywebsite.com/#home",