liên kết chặn chuyển đổi webkit

Tôi đã làm việc với các biến đổi và chuyển đổi để tạo các thành phần giao diện người dùng hoạt hình mà không có Javascript và thực sự thích kết quả, nhưng tôi đã gặp một vấn đề đáng lo ngại dường như là duy nhất đối với các trình duyệt webkit.liên kết chặn chuyển đổi webkit

Trên phần tử mà tôi đã xoay, một thanh kéo dài 100% chiều rộng của phần tử chỉ có thể truy cập ở bên phải 50% phần tử.

Sự cố này không tồn tại bằng cách sử dụng -moz-transform trong Firefox, nhưng có thể tái sản xuất 100% trong cả Chrome và Safari bằng cách sử dụng -webkit-transform.

Đây là mã:

<!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>

Bất kỳ sự giúp đỡ bất cứ ai có thể cung cấp sẽ được đánh giá rất nhiều như tôi đã dành một lượng quá nhiều thời gian về vấn đề này.

Nguồn

2012-06-04 MysterFitz

FWIW Tôi đã thấy các lỗi trong quá khứ với các siêu liên kết văn bản trong các phần tử được chuyển đổi trên webkit (đôi khi các siêu liên kết không hoạt động). Vì vậy, bạn không điên –

Cảm ơn Michael. Mã này phức tạp hơn nhiều trong trạng thái ban đầu của nó và, trong quá trình biến nó thành những thứ cần thiết để chứng minh vấn đề, tôi đã bị thuyết phục bởi sự tỉnh táo của mình. Nhưng điều đó chỉ khiến tôi tỉnh táo và không hiệu quả, điều đó chỉ tốt hơn một chút so với điên rồ và không hiệu quả. ;) – MysterFitz

Sau khi lướt qua webkit Bugzilla, tôi đã tìm thấy một người có cùng vấn đề và tìm thấy giải pháp thay thế.

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

trở thành:

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

Việc bổ sung các translateZ để biến đổi làm cho phía bên trái của nhấp được yếu tố.

Đây là một liên kết đến lỗi: https://bugs.webkit.org/show_bug.cgi?id=54371

Nguồn

2012-06-05 16:00:56 MysterFitz

Cảm ơn bạn rất nhiều vì giải pháp này. Tôi đã rách tóc ra cố gắng sửa lỗi này khi tôi đang làm việc trên một thẻ lật được cho là có một hình thức ở mặt sau và chỉ phía bên tay phải của các trường đầu vào có thể nhấp được. Đã làm việc này trong nhiều giờ và điều này thực sự giúp đỡ. Cảm ơn một lần nữa! – maiamachine

@MaiTar Tôi có thể liên hệ. Tôi nghĩ rằng tôi đã mất gần 2 ngày để giải quyết vấn đề này. Đó là một chặn cho toàn bộ dự án và tôi đã có thời gian khó khăn nhất để tìm bất kỳ tham chiếu nào đến nó. Vui mừng nó đã giúp! – MysterFitz

Điều này đã làm cho các trick cho tôi quá. Cảm ơn bạn! – Asimov4

tôi đã sử dụng mã này dưới đây

<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>

Giải pháp này làm việc cho tôi trong chrome. http://jsfiddle.net/jaxweb/7qtLD/7/

Nguồn

2014-03-07 20:10:44 user2347501

liên kết chặn chuyển đổi webkit

Trả lời

Các vấn đề liên quan