Animation css ne fonctionne pas sur IOS

taiji_n Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -  
taiji_n Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   - 16 août 2024 à 19:32

Bonjour à tous, je développe une page web en react tsx et css pour mon site dans laquelle j'ai mis une animation transform. Cependant l'animation ne se joue pas sur les appareils IOS, même après avoir rajouté " -webkit-animation".


Voici mon code txs
 

export function Erreur404() {
    return (
        <div className="erreur">
           <div className="top"></div>
            <div className="texte">
                <img src={peche} alt=""/>
                <h1>404</h1>
                <h3>Désolé, cette page n'a pas été trouvée...</h3>
                <Link to="/"><button>Retour</button></Link>

            </div>
            <div className="bottom">
                <svg className="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">
                    <defs>
                        <path
                            id="wave"
                            d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z"
                            fill="purple"
                        />
                    </defs>
                    <g>
                        <use href="#wave" />
                    </g>
                    <g transform="translate(761 0)">
                        <use href="#wave" />
                    </g>
                </svg>
                <svg className="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">
                    <defs>
                        <path
                            id="wave"
                            d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z"
                            fill="purple"
                        />
                    </defs>
                    <g>
                        <use href="#wave" />
                    </g>
                    <g transform="translate(761 0)">
                        <use href="#wave" />
                    </g>
                </svg>
                <svg className="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">
                    <defs>
                        <path
                            id="wave"
                            d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z"
                            fill="purple"
                        />
                    </defs>
                    <g>
                        <use href="#wave" />
                    </g>
                    <g transform="translate(761 0)">
                        <use href="#wave" />
                    </g>
                </svg>
            </div>
        </div>
    );
}

Voici mon code CSS :

 

* {
    margin: 0;
    padding: 0;

}

.cursor {
    display: block!important;
}

.erreur {
    height: 100vh;
    overflow-y: hidden;
}

.erreur .top {
    width: 100%;
    height: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.erreur .texte {
    position: absolute;
    z-index: 10;
    width: 100%;
    top: 50%; /* Centre verticalement la div */
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;

    h1 {
        font-size: 350px;
        margin: 0;
        padding: 0;
        font-weight: 1000;
        color: #77B5FE;
        display: inline-block;
        /*text-shadow:*/
        /*        -5px -5px 0 white, !* ombre en haut à gauche *!*/
        /*        5px -5px 0 white, !* ombre en haut à droite *!*/
        /*        -5px 5px 0 white, !* ombre en bas à gauche *!*/
        /*        5px 5px 0 white; !* ombre en bas à droite *!*/
    }

    h3 {
        font-size: 35px;
        margin: 0;
        padding: 0;
        color: #fff;
    }

    img {
        position: absolute;
        top: -6%;
        width: 690px;
    }

    button {
        font-size: 30px;
        margin-top: 50px;
        padding: 10px 80px;
        font-weight: bold;
        border: none;
        border-radius: 500px;
        color: #77B5FE;
        scale: 1;
        transition: all .5s;

        &:hover {
            scale: 1.2;
            /*box-shadow: 0 0 40px #24397B;*/
        }
    }

    @media (max-width: 1200px)  {
        h1 {
            font-size: 29vw;
        }

        h3 {
            font-size: 2.9vw;
        }

        img {
            width: 58vw;
        }

        button {
            font-size: 2.5vw;
        }
    }

    @media (max-width: 900px)  {
        h1 {
            font-size: 39vw;
        }

        h3 {
            font-size: 3.5vw;
        }

        img {
            width: 77vw;
        }

        button {
            font-size: 3.5vw;
        }
    }

}

.erreur .bottom {
    width: 100%;
    height: 50%;
    background-color: #77B5FE;
    position: relative;
}

.erreur .wave {
    position: absolute;
    top: -10%;
    right: 0;
    height: calc(var(--height, 0) * 1.5vh);
    width: calc(var(--width, 0) * 1vw);
    -webkit-animation: rise calc(var(--speed, 0) * 1.5s) infinite linear!important;
    -ms-animation: rise calc(var(--speed, 0) * 1.5s) infinite linear!important;
    animation: rise calc(var(--speed, 0) * 1.5s) infinite linear;
}

.erreur .wave:nth-of-type(1) {
    --speed: 60;
    --opacity: 0.3;
    --height: 12;
    --width: 320;
    --lightness: 90;
    --rise: 2;
}

.erreur .wave:nth-of-type(2) {
    --speed: 30;
    --opacity: 0.6;
    --height: 10;
    --width: 200;
    --lightness: 95;
    --rise: 5;
}

.erreur .wave:nth-of-type(3) {
    --speed: 18;
    --opacity: 1;
    --height: 6;
    --width: 180;
    --lightness: 100;
    --rise: 0;
}

.erreur .wave path {
    fill: hsl(212, 99%, 73%);
    opacity: var(--opacity);
    -webkit-animation: wave calc(var(--speed, 0) * 1s) infinite linear!important;
    -ms-animation: wave calc(var(--speed, 0) * 1s) infinite linear!important;
    animation: wave calc(var(--speed, 0) * 1s) infinite linear;
}

@-webkit-keyframes wave {
    to {
        -webkit-transform: translateX(-761px)!important;
        -ms-transform: translateX(-761px)!important;
        transform: translateX(-761px);
    }
}

@-webkit-keyframes rise {
    50% {
        -webkit-transform: translateY(-10px)!important;
        -ms-transform: translateY(-10px)!important;
        transform: translateY(-10px);
    }
}

Merci par avance

A voir également:

1 réponse

Réponse 1 / 1
luckydu43 Messages postés 4215 Date d'inscription   Statut Membre Dernière intervention   1 041
 

Bonjour

  • Dans la règle .erreur .wave, mettre
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
will-change: transform;

Ca permet d'aider Safari à reconnaître l'animation.

  • Il y a sûrement des !important de trop, supprime déjà dans le cas des .erreur .wave et .erreur .wave .path
  • les -ms-animation ne servent que pour Internet Explorer, Edge étant basé sur Chromium, plus aucun navigateur moderne n'a besoin de cette propriété

Tiens au jus après ces petits correctifs :-)
0
taiji_n Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 

Bonjour, j'ai bien rajouté le code que vous avez envoyé, cependant cela ne fonctionne toujours pas.

.erreur .wave {
    position: absolute;
    top: -10%;
    right: 0;
    height: calc(var(--height, 0) * 1.5vh);
    width: calc(var(--width, 0) * 1vw);
    -webkit-animation: rise calc(var(--speed, 0) * 1.5s) infinite linear;
    animation: rise calc(var(--speed, 0) * 1.5s) infinite linear;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    will-change: transform;
}

Par ailleurs je voulais préciser ne cela ne fonctionne pas sur les appareils IOS, que ce soit sur safari ou même google chrome. C'est pour cela que je n'arrive pas à comprendre la provenance du problème

0

Discussions similaires

Ipad 2 bloqué sur 9.3.5
Zaz -
VincentVoltaCCM -

2 réponses