I have a React MUI SPA application that uses a few anchor links. These links are stored in macOS App Store so users can get directly to the support and privacy sections of the web.
The problem is that the Safari browser does not scroll properly (Safari v15.6.1 at the time of writing).
When calling CodeSandbox from Safari, what I get is
When loaded in Firefox or Chrome, the result is as expected.
This issue happens with this exact code. If I remove the multiline property from the TextArea, replace the image link with some external resource, or replace maxWidth with width, everything works.
If I slow down the scrolling by 5s, it works well too. E.g.
setTimeout(() => {
document.querySelector(window.location.hash)?.scrollIntoView()
}, 5000)
Would be glad for any help with this. I have spent a whole day trying to crack this without any success :(
See the complete code here:
This is the main app causing the issues:
import {Grid, TextField, Typography} from "@mui/material"
import React, {useEffect} from "react";
import image from "./Box.jpg"
const TallBox = (props: {id: string, color: string}) => (
<>
<Typography variant="h4" id={props.id} gutterBottom>{props.id}</Typography>
<Typography style={{maxWidth: "400px", border: `1px solid ${props.color}`}} gutterBottom>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac tellus nisi. Sed elementum ornare justo, vel ullamcorper justo aliquam ac. Vestibulum euismod faucibus quam ut pulvinar. Proin auctor, elit ut tempor pretium, nunc lacus ornare urna, eget egestas diam velit id enim. Curabitur gravida sed elit at sollicitudin. Integer ultricies diam blandit felis euismod interdum. Ut malesuada erat id malesuada laoreet. Aenean tortor lacus, blandit non consectetur quis, eleifend at urna. Ut elementum sem et tincidunt aliquam. Donec fermentum dictum interdum. Aliquam eget ullamcorper dolor, a tincidunt mauris.
Quisque pulvinar luctus erat, ut dignissim purus ultricies id. Pellentesque molestie mi nulla, quis convallis magna varius a. Curabitur ultrices lobortis massa, a consequat justo tincidunt a. Praesent sollicitudin ligula ut lectus condimentum tincidunt. Cras euismod molestie ullamcorper. Aliquam in vestibulum ex, placerat interdum nisl. Vestibulum quis mattis est. Nam dui diam, sagittis non neque eget, laoreet pharetra augue.
Pellentesque in ipsum in ligula volutpat pellentesque ut vel sapien. Morbi ac posuere urna. Quisque et pellentesque mi. Sed auctor massa et neque commodo rhoncus nec quis est. Aenean et ligula dolor. Duis fringilla a justo nec vehicula. Pellentesque blandit sed nibh porttitor faucibus. Phasellus nisi erat, eleifend eu sem vel, convallis pharetra purus. Cras sagittis est at suscipit hendrerit.
Mauris volutpat lectus eu mi facilisis, in gravida odio aliquet. Proin ut viverra tortor. Ut commodo felis ut ullamcorper fermentum. Donec ultricies dictum euismod. Suspendisse sit amet purus dui. Nulla vestibulum enim tristique commodo interdum. Aenean sollicitudin lacinia placerat. Morbi magna purus, sollicitudin et purus non, scelerisque auctor lectus. Fusce hendrerit est at dui consectetur iaculis. Maecenas placerat luctus blandit. Aenean ac risus a tellus dictum mattis. Nullam sapien metus, imperdiet eget neque quis, convallis vulputate odio. Ut magna massa, posuere eu efficitur eu, semper ut enim. Morbi tincidunt consectetur quam, eget porta mi tincidunt et.
Duis lacinia lectus et lobortis malesuada. Duis bibendum tristique nulla. Maecenas tincidunt faucibus commodo. Pellentesque in tincidunt libero. Vestibulum ac fermentum erat, a ultricies mi. Nam vitae tortor quis lorem imperdiet gravida non at sapien. Fusce tincidunt maximus sapien quis porta. Donec id sapien vel enim imperdiet rutrum non eget arcu. Cras egestas vel mi eget viverra. Ut mollis neque eros, at fringilla ligula semper at. Nulla volutpat maximus mollis.
</Typography>
</>
)
export function App() {
useEffect(() => {
if (window.location.hash) {
document.querySelector(window.location.hash)?.scrollIntoView()
}
});
return (
<Grid container flexDirection="column" alignItems="center" textAlign="center" spacing={2}>
<Grid item>
<Typography sx={{maxWidth: "600px"}}>
<img src={image} alt="Box" style={{width: "100%"}}/>
</Typography>
</Grid>
<Grid item>
<TallBox id="section1" color="red"/>
</Grid>
<Grid item>
<TallBox id="section2" color="blue"/>
</Grid>
<Grid item>
<TextField name="text" label="text" multiline/>
</Grid>
</Grid>
)
}