iOS issue: Parallax image non responsive

[GBrachetta]

I want to achieve the following result in desktop view (two Material Ui Grids, the top one with the parallax on the left, the lower one on the right):

and this on mobile view:

So the text renders under each parallax on smaller screens.

My current code for this is as follows:

import menno1 from '../assets/images/menno1.jpeg';
import { Parallax } from 'react-parallax';
import { makeStyles, Grid, Typography } from '@material-ui/core';
import { Fragment } from 'react';

const useStyles = makeStyles((theme) => ({
  flexGrid: {
    [theme.breakpoints.down('sm')]: {
      flexDirection: 'column-reverse',
    },
  },
}));

const Home = () => {
  const classes = useStyles();

  return (
    <Fragment>
      <Grid container>
        <Grid container item xs={12} md={12}>
          <Grid item xs={12} md={6}>
            <Parallax strength={400} bgImage={menno1}>
              <div style={{ height: 1000 }} />
            </Parallax>
          </Grid>
          <Grid container item xs={12} md={6}>
            <Typography variant="h4">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam
              exercitationem velit possimus labore atque rem, accusantium quae
              quidem repudiandae mollitia error magni, blanditiis quos eos
              consequatur nostrum illum cumque id!
            </Typography>
          </Grid>
        </Grid>

        <Grid container item xs={12} md={12} className={classes.flexGrid}>
          <Grid container item xs={12} md={6}>
            <Typography variant="h4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum
              dolorem, esse voluptate quae libero non numquam nam maxime
              accusantium odit expedita explicabo doloribus architecto ea
              temporibus iste itaque ab veritatis.
            </Typography>
          </Grid>
          <Grid
            direction="column"
            container
            item
            xs={12}
            md={6}
            className={classes.item}
          >
            <Parallax strength={400} bgImage={menno1}>
              <div style={{ height: 1000 }} />
            </Parallax>
          </Grid>
        </Grid>
      </Grid>
    </Fragment>
  );
};

export default Home;

And this is working fine on chrome both on desktop and mobile views.

Here's the screenshot of the developer tools with the correct layout (all very schematic, just to have an MVP and style from there):

But this is the result on my iPhone 12:

Where am I failing here, or is this an iOS issue?

I have all that horizontal overflow and the Typography placement is all over the place.

I would really appreciate any help with this.

Thank you!

[rrutsche]

Hey, sorry for responding late. Looks like you already have some running code. I'd like to help but cannot unless I have a project I can play with. Can you put a basic setup in a codesandbox? Then I could have a look.

[brandonscript]

I don't see it in use in the code (maybe I'm blind!) but this smells like the result of iOS not supporting CSS background-attachment: fixed;