css z-index bị mất sau khi chuyển đổi webkit translate3d

Tôi có hai phần tử div được định vị hoàn toàn trùng nhau. Cả hai đều đã đặt giá trị chỉ số z thông qua css. Tôi sử dụng bộ translate3dchuyển đổi webkit để làm hoạt hình các phần tử này ra khỏi màn hình, sau đó quay lại màn hình. Sau khi biến đổi, các phần tử không còn tôn trọng các z-indexgiá trị đặt của chúng nữa.

Có ai có thể giải thích điều gì xảy ra với thứ tự z-index / stack-order của các phần tử div khi tôi thực hiện chuyển đổi webkit trên chúng không? Và giải thích những gì tôi có thể làm để giữ thứ tự ngăn xếp của các phần tử div?

Dưới đây là một số thông tin khác về cách tôi thực hiện chuyển đổi.

Trước khi chuyển đổi, mỗi phần tử được đặt hai giá trị chuyển tiếp webkit này thông qua css (Tôi đang sử dụng jQuery để thực hiện các .css()lệnh gọi hàm:

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

Phần tử này sau đó được làm động bằng cách sử dụng biến đổi translate3d -webkit-:

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });

Btw, tôi đã thử đặt tham số thứ 3 translate3dthành một số giá trị khác nhau để cố gắng sao chép thứ tự ngăn xếp trong không gian 3d, nhưng không may mắn.

Ngoài ra, trình duyệt iPhone / iPad và Android là trình duyệt mục tiêu của tôi mà mã này cần chạy trên đó. Cả hai đều hỗ trợ chuyển tiếp webkit.

Điều này có thể liên quan đến: https://bugs.webkit.org/show_bug.cgi?id=61824

Về cơ bản, khi bạn áp dụng một phép biến đổi 3D trên trục z, chỉ số z không thể được tính nữa (bây giờ bạn đang ở trong mặt phẳng kết xuất 3 chiều, hãy sử dụng các giá trị z khác nhau). Nếu bạn muốn chuyển về kết xuất 2D cho các phần tử con, hãy sử dụng transform-style: flat;.

Điều này chắc chắn liên quan đến lỗi được samy-delux ghi nhận. Điều này sẽ chỉ ảnh hưởng đến bất kỳ phần tử nào được định vị là tuyệt đối hoặc tương đối. Để khắc phục sự cố, bạn có thể áp dụng câu lệnh css sau cho mọi phần tử được định vị theo cách này và đang gây ra sự cố:

-webkit-transform: translate3d(0,0,0);

Thao tác này sẽ áp dụng biến đổi cho phần tử mà không thực sự thực hiện chuyển đổi, nhưng ảnh hưởng đến thứ tự hiển thị của nó, do đó nó nằm phía trên phần tử gây ra sự cố.

Hơi muộn với điều này nhưng hãy thử đặt các phần tử đã mất chỉ số Z của chúng vào vị trí sau, tôi đã gặp sự cố khi thực hiện một số công cụ thị sai gần đây và điều này đã giúp ích rất nhiều.

transform-style: preserve-3d;

Điều này tiết kiệm đặt

transform: translate3d(0,0,0);

Trên các yếu tố khác gây căng thẳng hơn cho GPU

Chờ xem ví dụ

Bạn đã thử thực hiện một thang đo biến đổi (1) chưa? Tôi nhớ đã gặp phải vấn đề tương tự và tôi phải sắp xếp lại thứ tự html của các phần tử và sử dụng một phép biến đổi mà tôi không cần nó chỉ vì chỉ số z của việc sử dụng phép biến đổi đã thay đổi.

Nếu tôi không nhầm, mỗi khi bạn sử dụng một biến đổi, nó sẽ trở thành chỉ mục z cao nhất hiện có và nó được sắp xếp theo phần tử gần nhất của html ở đầu thẻ. Vì vậy, từ trên xuống dưới.

Tôi hy vọng rằng điều này sẽ giúp

z-index sẽ hoạt động chống lại các div đã chuyển đổi 3d nếu bạn tạo kiểu cho phần tử có thể xếp chồng với -webkit-transform: translateZ(0px);

Đoạn mã trên codepen -> http://codepen.io/mrmoje/pen/yLIul

Trong ví dụ, các nút stack upvà stack downnâng và hạ chỉ số z của chân trang (+/- 1) so với phần tử được xoay (một img trong trường hợp này).

Tôi không thể tái tạo sự cố mà bạn mô tả ở đây. Bất kể tôi làm gì, giá trị z-index vẫn được giữ lại trong tất cả các phép biến đổi. Tôi đang thử nghiệm bằng Chromium (Google Chrome).

Đối số thứ ba của hàm translate3d thao tác trục z của phần tử. Khái niệm này tương tự như, nhưng không hoàn toàn giống với chỉ số z ... Các phần tử có trục z thấp hơn nằm dưới phần tử có giá trị cao hơn.

Tôi biết bạn đã thử các giá trị của đối số thứ ba để khớp với chỉ số z dự kiến ​​của bạn, nhưng vấn đề là trục z dường như không thay đổi trong hoạt ảnh CSS3. Trong ví dụ sau, phần tử được di chuột phải ở trên cùng, nhưng #element_a vẫn ở trên cùng.

Nếu tôi thêm chỉ mục z vào cả bộ chọn thông thường và: bộ chọn di chuột, nó dường như hoạt động và cho phép phần tử được di chuột ở vị trí cao nhất.

Mặc dù đó không phải là chính xác những gì bạn đang tìm kiếm, nhưng hành vi này cung cấp một giải pháp. Bạn chỉ cần sử dụng translate3d và z-index để thiết lập thứ tự cho lần hiển thị ban đầu.

<style>
    div {
        width: 300px;
        height: 150px;
        background-color: white;
        border: 5px outset gray;
        float: left;
        margin: 20px;
        -webkit-transition: 2s;
    }

    #element_a {
        -webkit-transform: translate3d(0, 0, 50px);
    }
    #element_b {
        -webkit-transform: translate3d(0, 0, 100px);
    }

    #element_a:hover {
        -webkit-transform: translate3d(100px, 0, 60px);
    }

    #element_b:hover {
        -webkit-transform: translate3d(-100px, 0, -60px);
    }
</style>
<body>
    <div id="element_a">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
    <div id="element_b">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
</body>

Một cách khác để giải quyết vấn đề này là bạn có thể tạo một phần tử cha và áp dụng tất cả các chuyển đổi khác liên quan đến nó:

# Apply transitions to a parent div
<div>
  # This image z-index -1 
  <img src="foo"/>

  # This image z-index -3
  <img src="bar"/>

  #This image z-index -2
  <img src="gg"/>
</div>

JsFiddle