Mã (JSFiddle Preview) dưới đây tạo ra kết quả bất ngờ trong Webkit so với các trình duyệt hiện đại khác:Lỗi Webkit phức tạp? Chức vụ tương đối + Z-Index + Overflow Hidden + CSS3 transform
<script type="text/javascript">
jQuery(document).ready(function($) {
RunFunction();
$('.ColorSquare').click(function() {
$('#Lightbox').css('display','block');
$('#ShowColorSquare').css('display','block');
$('#ShowColorSquare').css('z-index','10');
$('#ShowColorSquare').css('left',$('#ShowColorSquare').parent().width()/2 - 50);
$('#ShowColorSquare').css('top',$('#ShowColorSquare').parent().height()/2 - 50);
$('#ShowColorSquare').html('The color is: ' + $(this).css('background-color'));
});
$('#ShowColorSquare').click(function() {
$('#Lightbox').css('display','none');
$('#ShowColorSquare').css('display','none');
$('#ShowColorSquare').html('');
});
$('#Lightbox').click(function() {
$('#Lightbox').css('display','none');
$('#ShowColorSquare').css('display','none');
$('#ShowColorSquare').html('');
});
});
function RunFunction() {
$('#slide1').animate({
left: '-=310'
}, 3000);
$('#slide2').animate({
left: '-=310'
}, 3000);
$('#slide3').animate({
left: '-=310'
}, 3000, function() {
if($('#slide1').css("left") == '-310px') {
$('#slide1').css("left",620);
}
if($('#slide2').css("left") == '-310px') {
$('#slide2').css("left",620);
}
if($('#slide3').css("left") == '-310px') {
$('#slide3').css("left",620);
}
RunFunction();
});
}
</script>
<style>
#Spin {
width:50px;
height:50px;
margin: 15px 0px 15px 15px;
background-color:#960;
animation-name:Spin;
animation-duration:5s;
transform-origin:50% 50%;
animation-iteration-count:infinite;
-webkit-animation-name:Spin;
-webkit-animation-duration:5s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count:infinite;
}
@keyframes Spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-webkit-keyframes Spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
.ColorSquare {
height:100px;
width:100px;
position:absolute;
}
#ShowColorSquare {
height:100px;
width:100px;
position:absolute;
background-color:white;
display:none;
}
#Lightbox {
background-color:#000;
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
opacity:.8;
display:none;
z-index:5;
}
.Panel {
width:225px;
height:250px;
position:absolute;
background-color:#6C6C6C;
}
</style>
<div id="Spin"></div>
<div style="height:260px;width:500px;overflow-x:hidden;background:#CCC;">
<div style="height:250px;width:500px;position:relative;">
<div id="slide1" class="Panel" style="top:0px;left:0px;">
<div>Slide 1</div>
<div style="position:relative;margin-top:10px;width:225px;height:200px;">
<div class="ColorSquare" style="background-color:#093;left:0px;top:0px;"></div>
<div class="ColorSquare" style="background-color:#C9F;left:100px;top:100px;"></div>
</div>
</div>
<div id="slide2" class="Panel" style="top:0px;left:310px;">
<div>Slide 2</div>
<div style="position:relative;margin-top:10px;width:225px;height:200px;">
<div class="ColorSquare" style="background-color:#CF9;left:0px;top:0px;"></div>
<div class="ColorSquare" style="background-color:#C63;left:100px;top:100px;"></div>
</div>
</div>
<div id="slide3" class="Panel" style="top:0px;left:620px;">
<div>Slide 3</div>
<div style="position:relative;margin-top:10px;width:225px;height:200px;">
<div class="ColorSquare" style="background-color:#696;left:0px;top:0px;"></div>
<div class="ColorSquare" style="background-color:#F96;left:100px;top:100px;"></div>
</div>
</div>
<div id="ShowColorSquare"></div>
</div>
</div>
<div id="Lightbox"></div>
Dự kiến kết quả: Đó là nghĩa vụ phải có 3 DIV (slide) liên tục hoạt động ở bên trái trong một vòng lặp, bao gồm các hộp màu được kính trọng trong các trang chiếu. Nếu bạn nhấp vào một hộp màu, một hộp đèn hiển thị với màu RBG của hộp màu được nhấp trong trang trình bày được tôn trọng. Nhấp một lần nữa để đóng hộp đèn. Tất cả trong khi một chuyển đổi 3D được áp dụng trước khi ánh sáng màu xám mẹ DIV, với vị trí tương đối với tràn ẩn, với Jquery animate trên tuyệt đối trượt định vị DIV.
Kết quả trong Webkit: Các hộp màu trong trang trình bày không xuất hiện để di chuyển/hiển thị cho đến khi bạn đổi kích thước cửa sổ trình duyệt trên màn hình hoặc nhấp vào núm điều khiển thay đổi kích thước JSFiddle (hoặc pinch/zoon) trên máy tính bảng . Trên một lưu ý gỡ lỗi khác, nếu hoạt ảnh chuyển đổi 3D không lặp, khi hoạt ảnh dừng lại, DIV sẽ hiển thị như mong đợi.
Kết quả thử nghiệm cho thấy Webkit lỗi:
- Win7 IE10: Vượt qua
- Win7 Chrome: Vượt qua
- Win7 FF: Vượt qua
- Win7 Safari: thất bại
- Win8 IE11: Vượt qua
- Android Chrome: Fail
- iOS Safari: Fail
- Chrome dành cho iOS: thất bại
- MacOS Safari: thất bại
- MacOS Chrome: thất bại
Thông báo (JSFiddle Preview) mà không có 3D chuyển đổi, mã làm việc, mặc dù hoạt hình không được mịn trên desktop. Hộp đèn hoạt động tốt.
Thông báo (JSFiddle Preview) với biến đổi 3D sau DIV gốc, hoạt ảnh trơn tru và hộp đèn hoạt động tốt.
Thông báo (JSFiddle Preview) với -webkit-transform: xoay (0deg) áp dụng cho Bảo hiểm tiền gửi phụ huynh với tràn, hình ảnh động là choppy trên máy tính bảng, nhưng 3D chuyển đổi có thể tồn tại trước khi DIV cha mẹ hoặc trong trang trình bày DIV. Một vấn đề khác được tạo ra mặc dù. DIV tràn phụ huynh có chỉ số z thấp hơn so với hộp đèn, làm cho hộp đèn DIV tối xuất hiện phía trên hộp thoại màu trắng DIV nằm trong DIV gốc.
Tôi biết đây là một ví dụ rất lạ, nhưng đó là một ví dụ được tưới nước về mã phức tạp hơn. Biến đổi 3D phải ở trước DIV gốc hoặc trong một trang chiếu. Hộp thoại hộp đèn phải nằm trong DIV hoặc trang trình bày gốc, nhưng xuất hiện phía trên hộp đèn DIV tối, không thể nằm trong DIV gốc bởi vì tràn tràn sẽ không làm hộp đèn tối DIV xuất hiện toàn màn hình trình duyệt.
Mọi trợ giúp đều được đánh giá cao.
Hoạt động với tôi trong Chrome 28 trên OS X nhưng không hoạt động trong Safari 6. – insertusernamehere
Bất kỳ ai có bất kỳ trường hợp thử nghiệm nào khác nhau như insertusernamehere? – detailCode
Tôi tin rằng các phiên bản Chrome mới hơn đang thoát khỏi webkit. Điều này giải thích tại sao nó đã bị phá vỡ trong Win7 Chrome tháng trước, và bây giờ hoạt động. – detailCode