React Website gives blank page on IOS Safari - ios

Question

I created a single page website with React. While it works fine on Android and Windows devices, I get a white page error on IOS-based devices. I have tried many solutions.
I don't get console error for Safari (latest version) for Windows either.
Here for live : https://fitbodyclub.netlify.app/
It has many code you may look at it here : https://github.com/kececibora/FitBodyClub-Website
index.js:
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
package.json:
{
"name": "fitclub",
"homepage": "https://fitbodyclub.netlify.app/",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"framer-motion": "^6.3.15",
"number-counter": "^1.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-onclickoutside": "^6.12.2",
"react-scripts": "5.0.1",
"react-scroll": "^1.8.7",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I tried :
1 - "start_url": ".", // in manifest.json
2 - delete iframe from files
3- "homepage": ".", // added to package.json
4- "start_url": "``https://fitbodyclub.netlify.app/``", // added in manifest.json
5-"start": "yarn run start:tw & sleep 1 && yarn run start:cra", // added in package.json
6- <iframe allow="fullscreen" // added allow to iframe
7-
I started to rebuild it. I found the file gives that problem :
// import Header from "./Header/Header";
import "./Hero.css";
import hero_image from "../assets/hero_image.png";
import hero_image_back from "../assets/hero_image_back.png";
import Heart from "../assets/heart.png";
import Calories from "../assets/calories.png";
const transition = { type: "spring", duration: 3 };
const mobile = window.innerWidth <= 768 ? true : false;
function Hero() {
return (
<div className="hero" id="home">
<div className="blur hero-blur"></div>
<div className="left-h">
{/* <Header /> */}
{/* slogan */}
<div className="slogan">
<div
initial={{ left: mobile ? "165px" : "238px" }}
whileInView={{ left: "8px" }}
transition={{ ...transition, type: "tween" }}
></div>
<span>Sporun Kalbi burada atıyor 💛💛</span>
</div>
{/* Büyük Slogan */}
<div className="hero-text">
<div>
<span className="bosluk-text">Hayalinizdeki </span>
<span>Vücuda</span>
</div>
<div>
<span>Kavuşma Zamanı</span>
</div>
<div>
<span>
Burada sizlere hayalinizdeki vücuda kavuşmanıza yardım ediyoruz.
Sen de yapabilirsin!
</span>
</div>
</div>
{/* Figürler */}
<div className="figures">
<div>
<span>+500</span>
<span>metrekare</span>
</div>
<div>
<span>+2500</span>
<span>Üyelik</span>
</div>
<div>
<span>+250</span>
<span>Ekipman</span>
</div>
</div>
{/*Butonlar */}
<div className="hero-buttons">
<button className="btn">Katıl Bize</button>
<button className="btn">Daha Fazlası</button>
</div>
</div>
<div className="right-h">
<button className="btn">Üye Girişi</button>
<div
initial={{ right: "-1rem" }}
whileInView={{ right: "4rem" }}
transition={transition}
className="heart-rate"
>
<img src={Heart} alt="" />
<span>Heart Rate</span>
<span>116bpm</span>
</div>
{/* Hero images */}
<img src={hero_image} alt="" className="hero-image" id="hero_image" />
<img
initial={{ right: "11rem" }}
whileInView={{ right: "20rem" }}
transition={transition}
src={hero_image_back}
alt=""
className="hero-image-back"
id="hero_image_back"
/>
{/* Kalori */}
<div
initial={{ right: "37rem" }}
whileInView={{ right: "28rem" }}
transition={transition}
className="calories"
>
<img src={Calories} alt="" />
<div>
<span>Kalori</span>
<span>220 kcal</span>
</div>
</div>
</div>
</div>
);
}
export default Hero;
I started to rebuild it. I found the file gives that problem :

Answer 1

Part by part i builded so, a css element mix-blend-mode causes problem.
.App{mix-blend-mode: overlay;}