[英]Javascript working in IE8 but not chrome and safari and other latest browsers
[英]CSS not working in Safari, but in Chrome and other browsers it does
我项目的主页有一个图片库,每 x 秒自动滚动一次。 在 Chrome 和 Firefox 上一切都很好,但在 Safari 上,只有第一张图像显示良好,其他图像是空白幻灯片。
这里是 HomePage 组件:
import { useEffect, useState, useRef } from 'react'
import './home.styles.scss'
const galleriaDiImmagini = [
'https://i.ibb.co/LCzz4P4/1.webp',
'https://i.ibb.co/txwnt76/2.webp',
'https://i.ibb.co/XCHDFpx/3.webp',
'https://i.ibb.co/S6F1rtc/4.webp',
'https://i.ibb.co/P5GwHPz/5.webp'
]
const delay = 6000
const HomePage = () => {
const [index, setIndex] = useState(0)
const timeoutRef = useRef(null)
const resetTimeout = () => timeoutRef.current ? clearTimeout(timeoutRef.current) : null
useEffect(() => {
resetTimeout()
timeoutRef.current = setTimeout(
() =>
setIndex(prevIndex =>
prevIndex === galleriaDiImmagini.length - 1 ? 0 : prevIndex + 1
),
delay
)
return () => {
resetTimeout()
}
}, [index])
return (
<div className='homepage'>
<div
className='slide-container'
style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
>
{
galleriaDiImmagini.map((img, i) => (
<div
key={ i }
className='slide'
style={{
'background': `url(${img}) no-repeat center center fixed`
}}
>
</div>
))
}
</div>
<div className="punti-container">
{galleriaDiImmagini.map((_, i) => (
<div
key={i}
className={`punto${index === i ? " active" : ""}`}
onClick={() => {
setIndex(i);
}}
>
</div>
))}
</div>
</div>
)
}
export default HomePage
styles:
$colore-tosto: #2FA7CF;
.homepage {
position: relative;
overflow: hidden;
height: 100vh;
.slide-container {
height: 100%;
width: 100%;
position: relative;
white-space: nowrap;
-webkit-transition: transform 1000ms ease-in-out;
-moz-transition: transform 1000ms ease-in-out;
-o-transition: transform 1000ms ease-in-out;
transition: transform 1000ms ease-in-out;
.slide {
display: inline-block;
height: 100%;
width: 100%;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
}
.punti-container {
width: 100%;
text-align: center;
position: absolute;
top: 75%;
.punto {
display: inline-block;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: rgba($color: #ffff, $alpha: 0.5);
border: 2.5px solid $colore-tosto;
margin: 15px;
&:hover {
cursor: pointer;
background-color: rgba($color: #ffff, $alpha: 0.9);
}
&.active {
background-color: white;
}
}
}
@media only screen and (max-width: 730px) {
.punti-container {
top: 80%;
.punto {
height: 17px;
width: 17px;
border-width: 1.5px;
margin: 10px;
}
}
.slide-container {
.slide {
background-size: auto 100% !important;
}
}
}
}
这里是该网站的现场视频。 我提前感谢任何试图帮助我的人。
您需要删除background-attachment: fixed
safari 不支持,请在此处查看Can I use ,背景css 密钥的最后一个参数是附件
问题
似乎 safari 有一个错误并在使用transition: all
或transition: xSeconds
时产生问题。 它有时可能会崩溃。
解决方案
transition: color 1000ms ease-in-out;
(或任何其他财产。只是不要保留所有)。
在此处阅读更多信息: 我的网站始终崩溃 Safari(桌面和 iOS)
我会检查:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.