web-dev-qa-db-fra.com

La visibilité de la face arrière du kit Web ne fonctionne pas

Je construis un exemple simple pour retourner une carte en utilisant le -webkit-transform: rotateY propriété.

Il fonctionnait bien il y a quelques jours, mais tout d'un coup, il a cessé de fonctionner. L'effet fonctionne toujours, mais lorsque je survole la carte, le recto doit disparaître pour rendre le verso visible. pour cela j'utilise le -webkit-backface-visibility: hidden propriété. Mais il semble que cela ne fonctionne plus dans chrome (à la fois dans la version stable et la version nocturne)

Voici le code au cas où je ferais quelque chose de terrible

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Card Flip Using CSS</title>
    <style type="text/css">
        body {
            background-color: #3d994a;
        }
        h1 {
            font-size: 30pt;
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            display: block;
            text-shadow: 1px -1px 0px #4E4E4E;
        }
        #container { 
            -webkit-perspective: 1000; 
        }
        .card {
            position: relative;
            width: 286px;
            height: 392px;
            -webkit-transform-style: preserve-3d;           
            -webkit-transition: all 0.5s linear;           
        }   
        #container:hover .card{
            -webkit-transform: rotateY(180deg);
        }
        .face {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            border-radius: 20px;    
            border:1px solid #eee;
            background-color: #FFF;
            box-shadow: #000 3px 2px 4px;
        }
        .back {
            -webkit-transform:rotateY(180deg);  
        }
    </style>
</head>

<body>
    <h1>Hover over the card to flip it</h1>
    <div id="container">
        <div class="card">
            <div class="front face">            
                <img src="images/back.png" alt="" />
            </div>
            <div class="back face">
                <img src="images/front.png" alt="" />
            </div>      
        </div>
    </div>
</body>
</html>

Je suis arrivé à cette conclusion parce que j'ai fait quelques exemples simples en utilisant uniquement un div tourné avec un texte simple dessus, la propriété cachée de la face arrière et elle était toujours visible. En outre, cet exemple utilise cette propriété et a également cessé de fonctionner. Donc, pour résumer, ma question est, est-ce que quelqu'un d'autre a un problème avec cette propriété ou y a-t-il un problème avec mon code?

csscss3webkit
37
dgiulian

J'ai eu un problème similaire avec des enfants d'un tel élément quand un enfant avait un webkit-transform. J'ai noté que je devais également définir la visibilité de la face arrière sur cet élément:

<style>
#div1 {
    -webkit-transform: rotateX(180deg);
    -webkit-backface-visibility: hidden;
}
#div2 {
    -webkit-transform: translate3d(0,0,0);
}
</style>

<div id="div1">
    <div id="div2">
        Text
    </div>
</div>

La solution consiste donc à utiliser également:

#div2 {
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden; /* again */
}
22
EricG

Mettez simplement cette -webkit-transform:rotateY(0deg);, vous devez d'abord indiquer au navigateur quelle est la face avant.

24
Sujay Shinoda

Si vous avez testé toutes les autres options ici et que rien n'a fonctionné alors que cet exemple fonctionne sur votre navigateur, assurez-vous que l'élément correspondant à #card de l'exemple ci-dessous a overflow:visible:

<div id="container">
    <div class="card">
        <div class="front face"></div>
        <div class="back face"></div>      
    </div>
</div>
12
Konrad Dzwinel

Il est intéressant de noter que si vous définissez l'opacité sur une valeur autre que 1 (par exemple, 0, 99), la visibilité de la face arrière entrera soudainement en vigueur.

12
Gabor

J'ai rencontré ce problème dans plusieurs versions de Chrome sous Windows XP, y compris Chrome 24.

Cela l'a corrigé:

  1. Ouvrez l'éditeur de drapeau chrome via cette URL:

      chrome://flags/

  2. Activez le paramètre suivant:

    Remplacer la liste de rendu logiciel Remplace la liste de rendu logiciel intégrée et active l'accélération GPU sur les configurations système non prises en charge.

  3. Assurez-vous également que les animations CSS accélérées sont activées.

Le fait que cela ait résolu le problème suggère Chrome considère mon système comme un "système non pris en charge". En tant que tel, votre kilométrage peut varier en fonction de l'impression que Chrome a de votre système.

3
gooberverse

Il semble que ce ne soit pas tout à fait stable sur Mac, j'ai laissé chrome pendant quelques heures avec la page avec animation qui fonctionne et quand je suis revenu en arrière-visibilité arrête de travailler. Chrome restart a aidé à résoudre le problème.

1
highmaintenance

J'ai lu quelque part que cela avait quelque chose à voir avec la puissance GPU du PC hôte. Cela fonctionne pour moi sur chaque appareil doté d'un GPU décent. La preuve en est que cela ne fonctionne pas pour moi sur un Dell Mini, même après une nouvelle installation du système d'exploitation (win8) et sur une ancienne machine XP. Le problème est, en arrière- la visibilité du visage est là, mais n'est pas appelée, ce qui signifie que je ne peux pas utiliser javascript pour détecter cela.

Vérifiez http://amproductions.org

1
Luke Madhanga