CSS 3D-cube xoay sang bên, các phần tử bố trí sai trên bề mặt khi xoay 90 độ, nhưng không phải khi 89.9deg

Question

Trong Chrome, tôi đang cố gắng xoay hình khối, nhưng sau đó bên bất ngờ không thể thu vào được dường như được ưu tiên. Tuy nhiên, khi tôi tạo thành phần đó pointer-events: none, thẻ body là phần tử đầu tiên, vì vậy vì một lý do nào đó sau khi quay 90deg, nó sẽ mất tương tác.

Tuy nhiên, khi tôi chỉ xoay nó 89.9deg, không có vấn đề và tôi có thể tương tác với các yếu tố ở bên cạnh, tôi đã cố gắng loay hoay với translateZ nhưng điều đó không giúp đỡ.

tôi tái tạo nó ở đây: http://jsfiddle.net/TrySpace/GxJLV/

Và, trong firefox nó hoạt động tốt ...

Bất cứ ai quen thuộc với lỗi này/khác biệt và làm thế nào để sửa chữa nó?

- Có vẻ như yếu tố container tôi xoay mất tất cả các tương tác của nó vì phần tử thùng chứa là bề mặt phẳng trong thanh tra nắm giữ các phần tử 3D. ?

Cập nhật: http://jsfiddle.net/TrySpace/GxJLV/2/ (89,9 độ vẫn hoạt động ...)

Answer 1

Bạn đang bị ảnh hưởng bởi sự kết hợp giữa làm tròn lỗi và xử lý thử nghiệm hit của Chrome (có ít nhất http://crbug.com/126479 - lỗi mà không được đóng cửa và các bản vá đã cập nhật gần đây không khắc phục được trường hợp AFAICT của bạn).

Để tham khảo, đây là một phiên bản đơn giản của fiddle với html thêm và css loại bỏ: http://jsfiddle.net/GxJLV/7/

Fix, thay thế 1

Bạn đang định

.show-right { 
    -webkit-transform: rotate3d(0, 1, 0, -90deg); 
    ... 
} 

nhưng nếu bạn đánh dấu vào tính trong Công cụ dành cho nhà phát triển, bạn sẽ thấy rằng nó có thể là

-webkit-transform: matrix3d(0.00000000000000006123233995736766, 0, 1, 0, 
          0, 1, 0, 0, -1, 
          0, 0.00000000000000006123233995736766, 0, 0, 0, 0, 1); 

Điều này dẫn đến div và nút xoay được đặt bên dưới phần thân theo thứ tự z z. Nếu bạn thay thế rotate3d với

.show-right { 
    -webkit-transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 0, 1); 
    ... 
} 

thử nghiệm hit sẽ làm việc (xem http://jsfiddle.net/GxJLV/3/ chống lại gốc, http://jsfiddle.net/GxJLV/10/ so với phiên bản đơn giản).

Fix, thay thế 2

(Tại sao các công trình này là không rõ ràng với tôi, nhưng other people are doing it as well.)

Đặt (-webkit-)perspective về cha mẹ của các yếu tố xoay:

.view { 
    -webkit-perspective: 100000px; 
} 

Xem http://jsfiddle.net/GxJLV/4/ (bản gốc, http://jsfiddle.net/GxJLV/8/ giản thể)

Điều này sẽ gây ra một số nhấp nháy vào nút mặc dù.