My Next.js website is using a slider
https://github.com/nerdyman/react-compare-slider
It works great, but not on Safari, either Desktop or iPhone. here is my website
https://wordpress-website-headless-v2-afjayn5e2.vercel.app/
Close to the bottom of page I am using a comparison slider, this is causing the error.
I googled it, and it looks like many sliders have this issue on Safari, and the solution is to add a polyfill (https://www.npmjs.com/package/resize-observer-polyfill), which I did (I think) but it still doesn’t work.. This is my full page code.
To summarize, it works on Firefox and Chrome, but not Safari
import ResizeObserver from 'resize-observer-polyfill';
import Head from 'next/head'
import Link from 'next/link'
import Image from 'next/image'
import ContainerFull from '../components/container-full'
import HomeStories from '../components/home-stories'
import MyCarousel from '../components/carousel'
import HeroPost from '../components/hero-post'
import Intro from '../components/intro'
import Layout from '../components/layout'
import { getHomePage, getHomeSlides, getAllPostsForLanding } from '../lib/api'
import { CMS_NAME } from '../lib/constants'
import Header from '../components/header'
import Col from 'react-bootstrap/Col'
import Row from 'react-bootstrap/Row'
import Container from 'react-bootstrap/Container'
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
export default function Page( {page, finearts, allTeases: { edges }} ) {
const allTeases = edges.slice(1)
return (
<>
<Layout>
<Head>
<title>{ page.seo.title }</title>
<meta name="description" content={page.seo.metaDesc} />
</Head>
<Header />
<ContainerFull>
<Container fluid>
<Row>
<Col className="wrap-carousel">
<MyCarousel finearts={finearts} />
</Col>
</Row>
</Container>
<Container className="pad-row-bottom">
<Row>
<Col xs={12}>
<h1>{ page.title }</h1>
<div dangerouslySetInnerHTML={{ __html: page.content }} />
</Col>
</Row>
</Container>
<Container fluid className="home-blog pad-row-bottom">
<Container>
<Row>
<Col xs={12}> <h2>Art Shows / News / Blog</h2></Col>
{allTeases.length > 0 && <HomeStories posts={allTeases} />}
</Row>
</Container>
</Container>
<Container className="pad-row-bottom pad-row-top">
<Row>
<Col xs={12} md={9}>
<h2>Commissioned Artwork</h2>
<p>
I can create a stunning pixel painting from any photograph provided. It could be yourself, family member, favourite celebrity, family pet, landcape, or just about anything.<br /><br />
All the artwork I create starts from a photo, which I use as reference to create an Op Art Painting. From close up, the paintings are close to abstract, but as you step away they come into focus.
<br /><br />
<strong>Call me today at <a href="tel:416.450.5439">416.450.5439</a> to get a quote and get started on your personalized painting today.</strong>
</p>
</Col>
<Col xs={12} md={3}>
<ReactCompareSlider
itemOne={<ReactCompareSliderImage src="https://res.cloudinary.com/djk8wzpz4/image/upload/v1611180870/MCA-pixel-portrait_jqm50p.jpg" srcSet="https://res.cloudinary.com/djk8wzpz4/image/upload/v1611180870/MCA-pixel-portrait_jqm50p.jpg" alt="Image one" />}
itemTwo={<ReactCompareSliderImage src="https://res.cloudinary.com/djk8wzpz4/image/upload/v1611180870/MCA-original_wj8pjf.jpg" srcSet="https://res.cloudinary.com/djk8wzpz4/image/upload/v1611180870/MCA-original_wj8pjf.jpg" alt="Image two" />}
/>
</Col>
</Row>
</Container>
</ContainerFull>
</Layout>
</>
)
}
export async function getStaticProps({ preview = false }) {
const allTeases = await getAllPostsForLanding(preview)
console.log(allTeases)
const data = await getHomePage()
const fineart = await getHomeSlides()
console.log(fineart)
return {
props: {
page: data,
finearts: fineart,
allTeases,
},
}
}
Solution
I got in touch with the developer and we worked it out (this one is much cooler than css one and works on mobile)
import { install } from "resize-observer";
// if you use next.js, use this
if (typeof window !== "undefined") {
install();
}
// if you don't use next.js, this should work
install();
