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.

Hakob Sargsyan · Accepted Answer · 2022-08-01T09:31:27.287

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

edited Aug 01 '22 at 09:31

answered Aug 01 '22 at 09:14

Hakob Sargsyan

1,294
1
9
15

score 0 · Answer 2 · answered Aug 01 '22 at 09:12

0

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

answered Aug 01 '22 at 09:12

Harry

754
2
16

I've seen that post before and tried, but nothing – Saverio Randazzo Aug 01 '22 at 09:17

score 0 · Answer 3 · answered Aug 01 '22 at 09:14

0

I would check:

if you have any extensions that may be limiting your code's behavior in Safari:
did you inspect your code in Safari and check if the CSS is being imported
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

answered Aug 01 '22 at 09:14

DiogoAlmeida

1
4

I personally use Safari 15 from an emulator, also a colleague of mine who owns a Mac with the same Safari version experiences the same problems – Saverio Randazzo Aug 01 '22 at 09:20

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

3 Answers3