CSS not working in Safari, but in Chrome and other browsers it does

Question

The homepage of my project has a gallery of images that scroll every x seconds automatically. On Chrome and Firefox everything is fine, but on Safari only the first image shows well and the others are blank slides.

Here the HomePage component:

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

And the 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;
            }
        }
    }      
}

And here a live video of the site. I thank in advance anyone who tries to give me a hand.

Answer 1

You need to remove background-attachment : fixed not supported on the safari , check it here Can I use , last parameter of background css key is an attachment