2013-03-12 18 views
5

Tôi gặp sự cố thú vị khi cắt trong khi thực hiện xoay vòng 3D. Tôi đang quay một phần tử bằng cách sử dụng:Cắt sự cố trong khi chuyển đổi 3d trong Safari chỉ

-webkit-transform: rotate3d (0, 1, 1, 180deg);

Trong hoạt ảnh, có vẻ như trong Chrome, Firefox và bất kỳ trình duyệt nào khác ngoại trừ Safari.

Cửa sổ đang cắt qua các phần tử đằng sau nó. Đây không phải là vấn đề về chỉ mục z vì tôi đã chỉ định chỉ mục z thích hợp cho các thành phần này.

Bất kỳ ai biết điều gì có thể gây ra điều này xảy ra chỉ trong Safari?

Đây là những gì trông giống như trong Safari trong hoạt hình:

safari

Và hoạt hình đúng trong Chrome chrome

Cảm ơn!

+0

Bạn có thể sao chép trong fiddle/hiển thị thêm mã hay không. Tôi tin rằng bạn đang gặp vấn đề, nhưng cho phép người khác gỡ lỗi trong một fiddle có thể giúp loại bỏ các vấn đề khác. Điều đó đang được nói, tôi đã có vấn đề tương tự trước và tôi biết nó có vẻ kỳ lạ, nhưng hãy thử thêm một 3dtransformation trên các yếu tố xung đột nhưng với 0,0,0 chỉ để lực lượng dựng hình và xem nếu điều đó giúp. – Leeish

+0

Có tiến bộ nào không? Câu hỏi được mở quá lâu rồi. – actimel

Trả lời

1

Có thể là trong phiên bản của safari bạn đang sử dụng, z-index không được hỗ trợ tốt Check can I use.com

+0

Nghiêm túc? Bạn biết một số trình duyệt hỗ trợ chuyển đổi 3D nhưng không phải là những thứ cơ bản như z-index? Đó là vì 3D và giao điểm của những thứ trong không gian 3D, nhưng tôi không biết tại sao một số trình duyệt làm điều đó và một số thì không. Đó là điều hợp lý để cắt bỏ phần phía sau một số yếu tố khác, nhưng hầu hết thời gian bạn chỉ không muốn nó. Tôi cũng đấu tranh với nó ngay bây giờ. – actimel

1

Hãy thử đặt container của xoay modal transform-style: flat và mới perspective. Bạn cần thay đổi ngữ cảnh dựng hình 3D.

Đây là câu trả lời liên quan https://stackoverflow.com/a/18167565/1663572 - nhưng có thể bạn không muốn thay đổi vị trí trên trục Z vì nó thay đổi sự xuất hiện đáng kể. Tôi cũng không thể sử dụng nó.

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