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.

CodePudding user response：

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

CodePudding user response：

Problem

Seems like safari has a bug and creates problem when using transition: all or transition: xSeconds. It may sometimes crash.

Solution

Change it to transition: color 1000ms ease-in-out; (Or any other property. Just dont keep all ).

Read more here: My website crashes Safari (both desktop and iOS) consistently

CodePudding user response：

I would check:

1. if you have any extensions that may be limiting your code's behavior in Safari:
2. did you inspect your code in Safari and check if the CSS is being imported
3. Split your CSS code in chunks, and start adding each chunk gradually, and check the browser to see if its working; if it suddenly stops working then that's the faulty chunk. You then need to see if there are any incompatibilities with a property or something like that