我的Next.js网站使用滑块https://github.com/nerdyman/react-compare-slider
它工作得很好，但不是在Safari上，无论是桌面还是iPhone。这里是我的网站https://wordpress-website-headless-v2-afjayn5e2.vercel.app/
接近页面底部，我正在使用比较滑块，这是导致错误。
我在谷歌上搜索了一下，看起来很多滑块在Safari上都有这个问题，解决办法是添加一个polyfill（https://www.npmjs.com/package/resize-observer-polyfill），我确实这么做了（我认为），但它仍然不起作用。
总之，它可以在Firefox和Chrome上运行，但不能在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,
},
}
}
2条答案
按热度按时间gcuhipw91#
我和开发者取得了联系，我们解决了它（这一个比css一个酷多了，在移动上工作）
cidc1ykv2#
从docs来看，如果直接使用ResizeObserver，更好的解决方案是使用ponyfill：
但是因为它是一个有问题的底层库，所以最好使用polyfill。这个代码段只在缺少polyfill的情况下使用它（我假设Safari没有实现ResizeObserver，而不是它存在，但实现有问题）