Menu
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,
},
}
}
475
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();
From the docs, a better solution is to use the ponyfill if you're using ResizeObserver directly:
import { ResizeObserver } from 'resize-observer';
new ResizeObserver(
() => console.log('resize observed!')
).observe(document.body);
But because it's an underlying library having the issue, best to use the polyfill. This snippet will only use the polyfill if it's missing (I'm assuming that Safari simply doesn't implement ResizeObserver rather than it existing but with a faulty implementation)
import { install } from 'resize-observer';
if (!window.ResizeObserver) install();
/** do react-compare-slider things */
answered Oct 28 '25 21:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With