Bonjour ! 

J'ai besoin d'aide sur du css. Le code est totalement fonctionnel sur un navigateur pc. En revanche, il ne fonctionne pas sur Safari sur ios.

Le code css est le suivant : 

.bouton-rechercher {
    position: relative;
    border: none;
    background-image: none;
    background-color: #FAB62B;
    border-radius: 20px;
    height: 60px;
    width: 100%;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-size: 20px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #273339;
    transition-property: transform, background-color, color;
    -webkit-transition-property: transform, background-color, color;
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    z-index: 1;
}

.bouton-rechercher:hover {
    background-color: #273339;
    color: #FAB62B;
    transform: translate(10px, 10px);

}

.bouton-rechercher::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 10px;
    left: 10px;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-color: #273339;
    transition-property: top, left, background-color;
    -webkit-transition-property: top, left, background-color;
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
    transform: translateZ(-1px);
}

.bouton-rechercher:hover::after {
    background-color: #FAB62B;
    top: -10px;
    left: -10px;
}

Voilà ce que donne le bouton sans être hover :

Et une fois hover :

Hors, sur Safari, il s'affiche comme suivant (le pseudo élément passe devant, et je ne sais pas pourquoi) :

Dans le html, c'est simplement une balise a, pas de bouton.

Merci d'avance pour votre aide !

-
Edité par MatthieuAMSELLEM 16 août 2023 à 14:54:12

Bonjour,

tu peux enlever toutes les propriétés préfixées. Si on les utilise, on doit de toute façon les mettre *avant* la version non-préfixée. Une fois ceci fait, si le problème persiste, on verra ce qu'on peut faire

Merci de ta réponse !

Quand tu parles des propriétés préfixées, tu parles "-webkit" ? Si oui, je les ai enlevés et ça ne fonctionne toujours pas, le problème persiste.

Merci d'avance pour ton aide !

EDIT : Je précise que pour la capture sur le téléphone, ce n'est bien pas en hover, mais l'aspect de base de l'élément (donc avant le hover)

-
Edité par MatthieuAMSELLEM 16 août 2023 à 15:53:02