React Website gives blank page on IOS Safari

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;}