webkit trasforma il link di blocco

Ho lavorato con trasformazioni e transizioni per creare componenti UI animati senza Javascript e godendo davvero dei risultati, ma ho riscontrato un problema di disturbo che sembra essere esclusivo dei browser webkit.webkit trasforma il link di blocco

Su un elemento che ho ruotato, un'ancora che si estende per il 100% della larghezza dell'elemento è accessibile solo sul 50% giusto dell'elemento.

Questo problema non esiste utilizzando -moz-transform in Firefox, ma è riproducibile al 100% in Chrome e Safari utilizzando -webkit-transform.

Ecco il codice:

<!doctype html> 
<html> 
<head> 
<title>webkit spincard test bed</title> 
<style type="text/css"> 
    #card-lists{ 
width:100%; 
float:left; 
} 
#card-lists ul{ 
list-style:none; 
} 
#card-lists ul li{ 
width:230px; 
height:236px; 
} 
.non-mobile #card-lists ul.card-list li .flipcard-container:hover .flipcard, 
.non-mobile #card-lists ul.card-list li .flipcard-container.hover .flipcard{ 
    -moz-transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    -moz-transform-style: preserve-3d; 
    -moz-transition: all 0s linear 0s; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: all 0s linear 0s; 
} 
.non-mobile #card-lists ul.card-list li .flipcard{ 
    -moz-transform: rotateY(0deg); 
    -moz-transition: all 0s linear 0s; 
    -webkit-transform: rotateY(0deg); 
    -webkit-transition: all 0s linear 0s; 
    width:230px; 
    height:236px; 
} 
.face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -moz-backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
} 
.face.back { 
background-color: #125672; 
    -moz-transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
} 
.face.front { 
    background-color:#000; 
} 
</style> 
</head> 
<body class="non-mobile"> 
<div id="card-lists"> 
<ul class="card-list" id="cardes-list-total"> 
    <li> 
    <div class="flipcard-container"> 
     <div class="flipcard"> 
      <div class="front face"> 
       <a href="#"> 
       <div style="width:100%; height:100%;"> 
       </div> 
       </a> 
      </div> 
      <div class="back face"> 
       <a href="#"> 
       <div style="width:100%; height:100%;"> 
       </div> 
       </a> 
      </div> 
     </div> 
    </div> 
    </li> 
</ul> 
</div> 
</body> 
</html>

Qualsiasi aiuto chiunque potrebbe offrire sarebbe molto apprezzato come ho già speso una quantità eccessiva di tempo sulla questione.

fonte

2012-06-04 MysterFitz

FWIW Ho visto bug in passato con collegamenti ipertestuali di testo in elementi trasformati su webkit (a volte i collegamenti ipertestuali semplicemente non funzionano). Quindi non sei pazzo –

Grazie Michael. Il codice era molto più complesso nel suo stato originale e, nel tentativo di ridurlo alle sole cose necessarie per dimostrare il problema, mi sono convinto della mia sanità mentale. Ma questo mi rende solo sano e inefficace, che è solo moderatamente migliore di pazzo e inefficace. ;) – MysterFitz

Dopo aver esaminato il webkit Bugzilla, ho trovato qualcuno con lo stesso problema e trovato una soluzione alternativa.

.face.back { 
    background-color: #125672; 
    -moz-transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
}

diventa:

.face.back { 
    background-color: #125672; 
    -moz-transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg) translateZ(1px); 
}

L'aggiunta del translateZ alla trasformazione rende il lato sinistro dell'elemento cliccabile.

Ecco un link al bug: https://bugs.webkit.org/show_bug.cgi?id=54371

fonte

2012-06-05 16:00:56 MysterFitz

Grazie mille per questa soluzione. Mi stavo strappando i capelli cercando di sistemarlo mentre sto lavorando a un flip della carta che dovrebbe avere un modulo sul retro e solo il lato destro dei campi di input era cliccabile. Ho lavorato su questo per ore e questo mi ha davvero aiutato. Grazie ancora! – maiamachine

@MaiTar che posso riferire. Penso di aver perso quasi 2 giorni a giocare con questo problema. E 'stato un blocco per l'intero progetto e ho avuto il tempo più difficile di trovare alcun riferimento ad esso. Sono contento che ci abbia aiutato! – MysterFitz

Questo ha fatto il trucco anche per me. Grazie! – Asimov4

Ho usato questo codice qui sotto

<style>  
.outer div { 
     float: left; 
     -webkit-perspective: 200px; 
     -webkit-transform-style: preserve-3d; 
    } 
.outer a { 
     -webkit-transition: all 1.0s ease-in-out; 
     background:#0F6; 
     width:100px; 
     height:100px; 
     display:block; 
     -webkit-transform: rotateY(45deg); 
    } 
.outer div:hover a { 
     -webkit-transform: none; 
    } 
</style> 

<div class="outer"> 
    <div> 
     <a href="http://www.google.com/"></a> 
    </div> 
</div>

Questa soluzione funziona per me in cromo. http://jsfiddle.net/jaxweb/7qtLD/7/

fonte

2014-03-07 20:10:44 user2347501

webkit trasforma il link di blocco

risposta

Problemi correlati