webkit transformă link-ul de blocare

Am lucrat cu transformări și tranziții pentru a crea componente de animație animate fără Javascript și chiar mă bucur de rezultatele, dar am întâlnit o problemă tulburătoare care pare a fi unică pentru browserele webkit.

Pe un element pe care l-am rotit, o ancoră care se întinde la 100% din lățimea elementului este accesibilă doar pe partea dreaptă a elementului.

Această problemă nu există folosind -moz-transform în Firefox, dar este 100% reproductibilă atât în ​​Chrome, cât și în Safari folosind -webkit-transform.

Iată codul:

<!DOCTYPE HTML>
<html>
<head>
<title>webkit spincard test bed</title>
</head>
<body class="non-mobile">
<div id="card-lists">
</div>
</body>
</html>

Orice ajutor pe care oricine ar putea să-l ofere ar fi foarte apreciat, deoarece am cheltuit deja o cantitate prea mare de timp pe această temă.

0
Mulțumesc lui Michael. Codul a fost mult mai complex în starea inițială și, pe parcursul micșorării acestuia doar la lucrurile necesare pentru a demonstra problema, am devenit convins de sănătatea mea. Dar asta mă face sănătos și ineficient, care este doar moderat mai bun decât nebun și ineficient. ;)
adăugat autor MysterFitz, sursa
FWIW Am văzut bug-uri în trecut cu hyperlink-uri de text în elemente transformate pe webkit (uneori, hyperlink-urile pur și simplu nu funcționează). Deci nu ești nebun
adăugat autor Michael Mullany, sursa

2 răspunsuri

După ce am crăpat prin webkit Bugzilla, am găsit pe cineva care a avut aceeași problemă și a găsit o soluție.

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

devine:

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

Adăugarea translateZ la transformare face partea stângă a elementului clickable.

Here is a link to the bug: https://bugs.webkit.org/show_bug.cgi?id=54371

0
adăugat
Vă mulțumesc foarte mult pentru această soluție. Îmi rupeam părul în încercarea de a repara acest lucru pe măsură ce lucram la o flip card care ar fi trebuit să aibă o formă pe spate și numai partea dreaptă a câmpurilor de intrare era clicabilă. Am lucrat la asta de ore întregi și acest lucru a ajutat cu adevărat. Multumesc din nou!
adăugat autor maiamachine, sursa
@MaiTar Mă pot referi. Cred că am pierdut aproape 2 zile jucând în această problemă. A fost un blocant pentru întregul proiect și am avut cel mai greu timp de a găsi orice referire la el. Mă bucur că a ajutat!
adăugat autor MysterFitz, sursa
Asta a făcut și truc pentru mine. Mulțumesc!
adăugat autor Asimov4, sursa
Am constatat că aceasta este singura soluție care funcționează. Cu toate acestea, cheia este aceea de a aplica traducerea doar pe cardul pe care tocmai l-ați mișcat în spate și numai când a fost rotit. În acest fel, nu veți fi afectați de randarea fuzzy pe care altfel ar provoca traducerea.
adăugat autor strttn, sursa

Am folosit codul de mai jos

<div class="outer">
    <div>
        
    </div>
</div>

This solution works for me in chrome. http://jsfiddle.net/jaxweb/7qtLD/7/

0
adăugat
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com