Visibilidade do backface do Webkit não funciona

Eu estou construindo um exemplo simples para virar uma placa usando a propriedade -webkit-transform: rotateY .

Estava funcionando há alguns dias, mas de repente parou de funcionar. O efeito ainda funciona, mas quando eu pairar sobre o cartão, o lado da frente deve desaparecer para tornar o verso visível. para isso, estou usando a propriedade -webkit-backface-visibility: hidden . Mas parece que não está mais funcionando no chrome (tanto na versão estável quanto na versão noturna)

Aqui está o código no caso de eu estar fazendo algo terrível

     Card Flip Using 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); }    

Hover over the card to flip it

Cheguei a essa conclusão porque fiz alguns exemplos simples usando apenas uma div girada com um texto simples, a propriedade oculta da face posterior e ela ainda era visível. Além disso, este exemplo usa essa propriedade e também parou de funcionar. Então, para resumir, minha pergunta é: alguém mais tem problemas com essa propriedade ou há algum problema com meu código?

Eu tive um problema semelhante com os filhos desse elemento quando uma criança tinha uma webkit-transform . Eu notei que eu tinha que definir a visibilidade da backface nesse elemento também:

  
Text

Então a solução é usar também:

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

Basta colocar isso -webkit-transform:rotateY(0deg); , você precisa dizer ao navegador qual é a face frontal primeiro.

Se você testou todas as outras opções aqui e nada funcionou enquanto este exemplo funciona no seu navegador, por favor, certifique-se de que o elemento correspondente a #card do exemplo abaixo tenha overflow:visible :

 

Curiosamente, se você definir a opacidade para algo diferente de 1 (digamos, 99), de repente a visibilidade da face posterior entrará em vigor.

Eu encontrei esse problema em várias versões do Chrome no Windows XP, incluindo o Chrome 24.

Isso resolveu:

  1. Abra o editor de sinalizadores chrome por meio deste URL:

      chrome://flags/ 
  2. Ative a seguinte configuração:

    Substituir lista de renderização de software Substitui a lista de renderização de software integrada e permite a aceleração de GPU em configurações de sistema não suportadas.

  3. Verifique também se as animações CSS aceleradas estão ativadas.

O fato de que isso resolveu o problema sugere que o Chrome considera meu sistema um “sistema não suportado”. Como tal, a sua milhagem pode variar dependendo da impressão do Chrome sobre o seu sistema.

Eu li em algum lugar que é algo a ver com o poder da GPU do PC host. Isso funciona para mim em todos os dispositivos que possuem uma GPU decente. Prova disso é o fato de que ele não funciona para mim em um Dell Mini, mesmo depois de uma instalação do SO Fresh (win8) e em uma máquina XP antiga. O problema é que back-face-visibility está lá, mas não é chamado, o que significa que não posso usar o javascript para detectar isso.

Verifique para http://amproductions.org

Parece que não é muito estável no Mac, deixei o chrome por algumas horas com a página com animação funcionando e quando voltei a visibilidade, parei de trabalhar. O reinício do Chrome ajudou a resolver o problema.