css z-index หายไปหลังจาก webkit แปลง translate3d

ฉันมีองค์ประกอบ div สองตำแหน่งที่ทับซ้อนกัน ทั้งสองได้ตั้งค่าดัชนี z ผ่าน css ฉันใช้การtranslate3dแปลง webkit เพื่อทำให้องค์ประกอบเหล่านี้เคลื่อนไหวออกจากหน้าจอจากนั้นกลับเข้าสู่หน้าจอ หลังจากที่เปลี่ยนองค์ประกอบไม่เคารพชุดของz-indexค่า

ใครช่วยอธิบายได้ไหมว่าเกิดอะไรขึ้นกับ z-index / stack-order ขององค์ประกอบ div เมื่อฉันทำการแปลง webkit และอธิบายสิ่งที่ฉันสามารถทำได้เพื่อรักษาลำดับสแต็กขององค์ประกอบ div

นี่คือข้อมูลเพิ่มเติมเกี่ยวกับวิธีการแปลงร่าง

ก่อนการแปลงแต่ละองค์ประกอบจะได้รับค่าการเปลี่ยน webkit สองค่าที่กำหนดผ่าน css (ฉันใช้ jQuery เพื่อ.css()เรียกใช้ฟังก์ชัน:

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

จากนั้นองค์ประกอบจะเคลื่อนไหวโดยใช้ translate3d -webkit-transform:

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

Btw ฉันได้ลองตั้งค่าพารามิเตอร์ที่ 3 เป็นค่าtranslate3dที่แตกต่างกันหลายค่าเพื่อพยายามทำซ้ำลำดับสแต็กในพื้นที่ 3 มิติ แต่ก็ไม่โชคดี

นอกจากนี้เบราว์เซอร์ iPhone / iPad และ Android ก็เป็นเบราว์เซอร์เป้าหมายของฉันที่รหัสนี้ต้องใช้ ทั้งสองรองรับการเปลี่ยน webkit

สิ่งนี้อาจเกี่ยวข้องกับ: https://bugs.webkit.org/show_bug.cgi?id=61824

โดยทั่วไปเมื่อคุณใช้การแปลง 3 มิติบนแกน z ดัชนี z จะไม่สามารถคำนวณได้อีกต่อไป (ตอนนี้คุณอยู่ในระนาบการแสดงผล 3 มิติใช้ค่า z ที่แตกต่างกัน) หากคุณต้องการที่จะเปลี่ยนกลับไปใช้การแสดงผลแบบ 2D transform-style: flat;สำหรับองค์ประกอบของเด็กใช้

สิ่งนี้เกี่ยวข้องกับข้อบกพร่องที่ระบุโดย samy-delux สิ่งนี้ควรส่งผลต่อองค์ประกอบใด ๆ ที่อยู่ในตำแหน่งสัมบูรณ์หรือสัมพัทธ์ ในการแก้ไขปัญหาคุณสามารถใช้คำสั่ง css ต่อไปนี้กับทุกองค์ประกอบที่อยู่ในตำแหน่งนี้และเป็นสาเหตุของปัญหา:

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

สิ่งนี้จะนำการแปลงไปใช้กับองค์ประกอบโดยไม่ต้องทำการแปลงจริง แต่ส่งผลต่อลำดับการแสดงผลดังนั้นจึงอยู่เหนือองค์ประกอบที่ทำให้เกิดปัญหา

ช้าไปหน่อย แต่ลองใส่องค์ประกอบที่สูญเสียดัชนี Z ของพวกเขาวางสิ่งต่อไปนี้ฉันมีปัญหาเมื่อทำสิ่ง Parallax เมื่อเร็ว ๆ นี้และสิ่งนี้ช่วยได้อย่างมาก

transform-style: preserve-3d;

ซึ่งจะช่วยประหยัดการวาง

transform: translate3d(0,0,0);

ในองค์ประกอบอื่น ๆ ที่ทำให้ GPU เครียดมากขึ้น

รอชมตัวอย่างครับ

คุณเคยลองแปลงร่าง (1) หรือยัง? ฉันจำได้ว่ามีปัญหาที่คล้ายกันและฉันต้องจัดเรียงลำดับ html ขององค์ประกอบใหม่และใช้การแปลงที่ฉันไม่ต้องการเพียงเพราะดัชนี z ของการใช้การแปลงเปลี่ยนไป

ถ้าฉันไม่ผิดพลาดทุกครั้งที่คุณใช้การแปลงมันจะกลายเป็นดัชนี z สูงสุดที่มีและเรียงลำดับตามองค์ประกอบที่ใกล้ที่สุดของ html คือจุดเริ่มต้นของแท็ก จากบนลงล่าง

ฉันหวังว่าการช่วยเหลือนี้

z-index จะทำงานกับ div ที่เปลี่ยนรูปแบบ 3 มิติหากคุณจัดรูปแบบองค์ประกอบที่วางซ้อนกันได้ด้วย -webkit-transform: translateZ(0px);

Snippet บน codepen -> http://codepen.io/mrmoje/pen/yLIul

ในตัวอย่างปุ่มstack upและstack downเพิ่มและลดดัชนี z ของส่วนท้าย (+/- 1) เทียบกับองค์ประกอบที่หมุนแล้ว (ในกรณีนี้คือ img)

ฉันไม่สามารถจำลองปัญหาที่คุณอธิบายไว้ที่นี่ได้ ไม่ว่าฉันจะทำอะไรค่าดัชนี z จะยังคงอยู่ตลอดการแปลงทั้งหมด ฉันกำลังทดสอบโดยใช้ Chromium (Google Chrome)

อาร์กิวเมนต์ที่สามของฟังก์ชัน translate3d จัดการกับแกน z ขององค์ประกอบ แนวคิดนี้คล้ายกับ แต่ไม่เหมือนกับดัชนี z ... องค์ประกอบที่มีแกน z ต่ำกว่าจะอยู่ภายใต้องค์ประกอบที่มีค่าสูงกว่า

ฉันรู้ว่าคุณลองใช้ค่าของอาร์กิวเมนต์ที่สามเพื่อให้ตรงกับดัชนี z ที่คุณต้องการ แต่ปัญหาคือแกน z ดูเหมือนจะไม่เปลี่ยนแปลงในระหว่างการเคลื่อนไหว CSS3 ในตัวอย่างต่อไปนี้องค์ประกอบที่ถูกวางไว้ควรอยู่ด้านบน แต่ #element_a จะอยู่ด้านบน

ถ้าฉันเพิ่ม z-index ให้กับทั้งตัวเลือกปกติและตัวเลือก: hover ดูเหมือนว่าจะใช้งานได้และอนุญาตให้องค์ประกอบที่โฮเวอร์อยู่บนสุด

แม้ว่าจะไม่ใช่สิ่งที่คุณกำลังมองหา แต่พฤติกรรมนี้เป็นวิธีแก้ปัญหา คุณเพียงแค่ต้องใช้ translate3d และ z-index เพื่อกำหนดลำดับสำหรับการเรนเดอร์เริ่มต้น

<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>

อีกวิธีหนึ่งคือคุณสามารถสร้างองค์ประกอบหลักและใช้การเปลี่ยนอื่น ๆ ทั้งหมดที่เกี่ยวข้อง:

# 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