CSS 在 Safari 中不工作，但在 Chrome 和其他瀏覽器中可以

Question

我項目的主頁有一個圖片庫，每 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;
            }
        }
    }      
}

這里是該網站的現場視頻。 我提前感謝任何試圖幫助我的人。

Answer 1

您需要刪除background-attachment: fixed safari 不支持，請在此處查看Can I use ，背景css 密鑰的最后一個參數是附件

Answer 2

問題

似乎 safari 有一個錯誤並在使用transition: all或transition: xSeconds時產生問題。 它有時可能會崩潰。

解決方案

transition: color 1000ms ease-in-out; （或任何其他財產。只是不要保留所有）。

在此處閱讀更多信息： 我的網站始終崩潰 Safari（桌面和 iOS）

Answer 3

我會檢查：

1. 如果您有任何擴展可能會限制您的代碼在 Safari 中的行為：
2. 您是否檢查了 Safari 中的代碼並檢查是否正在導入 CSS
3. 將您的 CSS 代碼拆分為塊，並開始逐步添加每個塊，並檢查瀏覽器是否正常工作； 如果它突然停止工作，那就是有問題的塊。 然后，您需要查看是否與屬性或類似的東西有任何不兼容