La visibilità del backface Webkit non funziona

Sto costruendo un semplice esempio per capovolgere una carta usando la proprietà -webkit-transform: rotateY .

Stava funzionando bene un paio di giorni fa, ma all’improvviso smette di funzionare. L’effetto funziona ancora, ma quando passo il mouse sulla carta, il lato anteriore dovrebbe scomparire per rendere visibile il retro. per questo sto usando il -webkit-backface-visibility: hidden proprietà -webkit-backface-visibility: hidden . Ma sembra che non funzioni più in chrome (sia nella versione stabile che in quella notturna)

Ecco il codice nel caso in cui sto facendo qualcosa di terribile male

     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

Sono arrivato a questa conclusione perché ho creato un paio di semplici esempi usando solo un div ruotato con un semplice testo su di esso, la proprietà nascosta di backface ed era ancora visibile. Inoltre, questo esempio utilizza questa proprietà e smette di funzionare. Quindi, per riassumere, la mia domanda è: qualcun altro ha problemi con questa proprietà o c’è un problema con il mio codice?

Ho avuto un problema simile con i bambini di un tale elemento quando un bambino aveva una webkit-transform . Ho notato che dovevo impostare la visibilità del backface anche su quell’elemento:

  
Text

Quindi la soluzione è usare anche:

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

Basta mettere questo -webkit-transform:rotateY(0deg); , devi prima dire al browser quale è la facciata anteriore.

Se hai testato tutte le altre opzioni qui e niente ha funzionato mentre questo esempio funziona sul tuo browser, assicurati che l’elemento corrispondente a #card dall’esempio seguente abbia overflow:visible :

 

È interessante notare che se si imposta l’opacità su qualsiasi valore diverso da 1 (ad esempio, 0,99), all’improvviso la visibilità del backface entrerà in vigore.

Ho riscontrato questo problema in più versioni di Chrome su Windows XP, incluso Chrome 24.

Questo l’ha risolto:

  1. Apri l’editor di chrome flag tramite questo URL:

      chrome://flags/ 
  2. Abilita la seguente impostazione:

    Sovrascrivi l’elenco di rendering del software Sovrascrive l’elenco di rendering del software integrato e abilita l’accelerazione GPU su configurazioni di sistema non supportate.

  3. Assicurati anche che le animazioni CSS accelerate siano abilitate.

Il fatto che questo risolva il problema suggerisce che Chrome considera il mio sistema un “sistema non supportato”. Di conseguenza, il tuo chilometraggio può variare a seconda dell’impressione di Chrome sul tuo sistema.

Ho letto da qualche parte che è qualcosa che ha a che fare con la potenza della GPU del PC host. Questo funziona per me su ogni dispositivo che ha una GPU decente. La prova di ciò è che non funziona per me su un Dell Mini, anche dopo un’installazione di Fresh OS (win8) e su una vecchia macchina XP. Il problema è che il back-face-visibility è lì, ma non viene chiamato, il che significa che non posso usare javascript per rilevarlo.

Controlla http://amproductions.org

Sembra che non sia abbastanza stabile su Mac, ho lasciato il chrome per un paio d’ore con la pagina con l’animazione funzionante e quando sono tornato indietro, la visibilità ha smesso di funzionare. Il riavvio di Chrome ha aiutato a risolvere il problema.