Animation css ne fonctionne pas sur IOS

taiji_n Messages postés 7 Date d'inscription dimanche 12 décembre 2021 Statut Membre Dernière intervention 16 août 2024 - Modifié le 15 août 2024 à 12:00
taiji_n Messages postés 7 Date d'inscription dimanche 12 décembre 2021 Statut Membre Dernière intervention 16 août 2024 - 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 vendredi 9 janvier 2015 Statut Membre Dernière intervention 13 mai 2025 1 040
Modifié le 16 août 2024 à 13:41

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 dimanche 12 décembre 2021 Statut Membre Dernière intervention 16 août 2024
16 août 2024 à 19:32

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 -

Bonjour,

Le sujet a sûrement déjà été traité mais j'espère trouver réponse tout de même. Mon iPad 2 est en dernière version logicielle 9.3.5, rien d'autre n'est proposé et je crois savoir que Apple ne supporte plus ni cette version ni ce modèle. Ceci dit je ne peux plus télécharger aucune appli car cela requiert une version 10 minimum. Que faire svp? C'est l'iPad de ma mère qui a déjà eu du mal à s'y faire et il est exclu d'en changer. Merci par avance pour votre aide.

2 réponses