Lỗi trong CSS3 xoay chuyển đổi trên Safari?

Question

Tôi đang hiển thị cửa sổ bật lên phương thức bằng cách sử dụng chuyển tiếp CSS3 (phần lớn được vay từ Effeckt.css). Nó hoạt động tốt trong tất cả các trình duyệt hiện đại ngoại trừ Safari. Trong Safari, chuyển động là OK, nhưng màu nền lại không đều.

Đây là mã, vấn đề là có thể nhìn thấy trong Safari trên OSX: http://jsfiddle.net/eJsZx/4/

Một ảnh chụp màn hình của vấn đề trước khi nó giải quyết riêng của mình. Bạn có thể thấy rằng một nửa div được tô màu trắng một cách chính xác, một nửa vẫn trong suốt.

Đây là phần liên quan của CSS (.effeckt-show và .md-effect-8 được áp dụng khi nút được nhấn vào, để hiển thị các phương thức):

.effeckt-modal { 
    visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
    background: white; 
} 
.md-effect-8 { 
    -webkit-perspective: 1300px; 
    -ms-perspective: 1300px; 
    -o-perspective: 1300px; 
    perspective: 1300px; 
    -webkit-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 
.md-effect-8 .effeckt-modal { 
    -webkit-transform: rotateY(-70deg); 
    -ms-transform: rotateY(-70deg); 
    -o-transform: rotateY(-70deg); 
    transform: rotateY(-70deg); 
    -webkit-transition: all 500ms; 
    -o-transition: all 500ms; 
    transition: all 500ms; 
    opacity: 0; 
} 
.effeckt-show.md-effect-8 .effeckt-modal { 
    -webkit-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    -o-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
    opacity: 1; 
} 

Answer 1

Theo như tôi có thể nói đó là một lỗi, vâng, Safari đang hiển thị giao lộ nơi không nên.

Đối với một số thời gian I thought Safari is doing it right bằng cách luôn luôn render giao điểm của các yếu tố, nhưng như xa như tôi hiểu the specs, chỉ có các yếu tố trong cùng 3d rendering context nên giao nhau, và đó sẽ là con của các nguyên tố với một transform-style của preserve-3d.

Cho đến nay giải pháp khắc phục duy nhất tôi tìm thấy (chỉ được thử nghiệm trên Windows nhưng Safari cho thấy hành vi tương tự) là dịch các phần tử cơ bản đi trên trục z. Nếu không có quan điểm được áp dụng nó sẽ không thực sự dịch, nhưng Safari/Webkit dường như nghĩ nó (có thể là vì nó xử lý nhầm phần tử như thể nó đang ở trong cùng một bối cảnh rendering 3d như hộp thoại thực sự được chuyển đổi) và vì vậy các phần tử không còn giao nhau nữa.

.effeckt-overlay { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    visibility: hidden; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    -webkit-transition: 500ms; 
    -o-transition: 500ms; 
    transition: 500ms; 
    z-index: 1000; 
    background: rgba(0, 0, 0, 0.5); 

    -webkit-transform: translateZ(-1000px); 
} 

http://jsfiddle.net/eJsZx/5/