css z- इंडेक्स वेबकिट ट्रांसलेट 3 डी के बाद खो गया

Question

मेरे पास ओवरलैप करने वाले दो बिल्कुल तैनात div एलिमेंट्स हैं। दोनों ने css के माध्यम से z-index मान निर्धारित किए हैं। मैं translate3dस्क्रीन से दूर इन तत्वों को चेतन करने के लिए वेबकिट परिवर्तन का उपयोग करता हूं , और फिर स्क्रीन पर वापस। परिवर्तन के बाद, तत्व अब अपने निर्धारित z-indexमूल्यों का सम्मान नहीं करते हैं।

क्या कोई बता सकता है कि एक बार जब मैं उन पर वेबकीट ट्रांसफ़ॉर्म करता हूं, तो डिविज़न के z- इंडेक्स / स्टैक-ऑर्डर का क्या होता है? और समझाएं कि मैं दिव्य तत्वों के ढेर-क्रम को बनाए रखने के लिए क्या कर सकता हूं?

यहाँ कुछ और जानकारी दी गई है कि मैं कैसे परिवर्तन कर रहा हूँ।

परिवर्तन से पहले, प्रत्येक तत्व को इन दो वेबकिट संक्रमण मूल्यों को सीएसएस के माध्यम से सेट किया जाता है (मैं .css()फ़ंक्शन कॉल करने के लिए jQuery का उपयोग कर रहा हूं :

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

तत्व तो अनुवाद 3d -webkit- परिवर्तन का उपयोग कर एनिमेटेड है:

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

Btw, मैंने 3 translate3dडी स्पेस में स्टैक-ऑर्डर को दोहराने की कोशिश करने के लिए कई अलग-अलग मानों के तीसरे पैरामीटर को सेट करने की कोशिश की है, लेकिन कोई भाग्य नहीं।

इसके अलावा, iPhone / iPad और Android ब्राउज़र मेरे लक्षित ब्राउज़र हैं जिन्हें इस कोड को चलाने की आवश्यकता है। दोनों वेबकिट संक्रमण का समर्थन करते हैं।

Comments

क्या आप उदाहरण देखने के लिए एक लिंक पोस्ट कर सकते हैं?

— लिटिलमैड

मैं उसी मुद्दे पर मिला था। मेरे पास एक <iframe> तत्व शैली के साथ टैग है "-webkit-transform: Translate3d (0,0,0)" जो 3 डी त्वरण के लिए बाध्य करता है। यह पता चला है कि उच्च z- इंडेक्स वाले बाहरी फ्रेम हमेशा अंदर iframe तत्व द्वारा छिपाए जाते हैं। बस दृश्य छिपी हुई है, मैं अदृश्य बाहरी तत्व पर "क्लिक" कर सकता हूं। यह केवल मोबाइल सफारी में होता है।

— मॉर्गन चेंग

मैं 10h लगा रहा था जो मेरे कोड को काम नहीं कर रहा था। ओह

— Dikeneko

Answer 1

यह संबंधित हो सकता है: https://bugs.webkit.org/show_bug.cgi?id=61824

मूल रूप से जब आप z- अक्ष पर 3 डी परिवर्तन लागू करते हैं, तो z- इंडेक्स का अब कोई हिसाब नहीं किया जा सकता है (आप अब 3 आयामी रेंडरिंग प्लेन में हैं, विभिन्न z- मानों का उपयोग करते हैं)। यदि आप बाल तत्वों के लिए 2 डी प्रतिपादन में वापस स्विच करना चाहते हैं, तो उपयोग करें transform-style: flat;।

Comments

मूल रूप से जब आप z- अक्ष पर 3 डी परिवर्तन लागू करते हैं, तो z- इंडेक्स का अब कोई हिसाब नहीं किया जा सकता है (आप अब 3 आयामी रेंडरिंग प्लेन में हैं, विभिन्न z- मानों का उपयोग करते हैं)। यदि आप बाल तत्वों के लिए 2 डी प्रतिपादन में वापस स्विच करना चाहते हैं, तो उपयोग करें transform-style: flat;।

— samy-delux

इसलिए "संरक्षित 3 डी" मोड में हम सेट क्रम में ट्रांसफॉर्मेशन के z- अक्ष का उपयोग करते हैं, और फ्लैट मोड में हमें z-index का उपयोग करना चाहिए। बग यह है कि सफारी पर जेड-इंडेक्स एचडब्ल्यू त्वरित परिवर्तनों के साथ संयोजन में टूट गया है।

— स्टीवन लू

काम नहीं करता। केवल तभी काम करता हूं जब मैं कक्षा के अनुसार एनिमेटेड स्टाइल हटाता हूं।

— fdrv

Answer 2

यह सबसे निश्चित रूप से बग से संबंधित है, जिसे सैमी-डेलक्स द्वारा नोट किया गया है। यह केवल उन्हीं तत्वों को प्रभावित करता है जिन्हें निरपेक्ष या सापेक्ष के रूप में तैनात किया जाता है। समस्या को हल करने के लिए, आप निम्न एलएसएस स्टेटमेंट को प्रत्येक तत्व पर लागू कर सकते हैं जो इस तरह से तैनात है और मुद्दों का कारण बन रहा है:

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

यह वास्तव में परिवर्तन किए बिना तत्व में परिवर्तन को लागू करेगा, लेकिन इसके रेंडर ऑर्डर को प्रभावित करना इसलिए यह समस्या पैदा करने वाले तत्व से ऊपर है।

Comments

Chrome (35.0.1916.114 m) का उपयोग करते हुए, मैंने पाया कि यदि मेरा यह नियम नहीं था, तो तत्व फ़्लिप होने के बाद [ट्रांसफॉर्म: रोटवाई (180deg)], कि jQuery क्लिक हैंडलर उस एलिमेंट के लिए काम नहीं करते थे। इसके अलावा, एक फ्लिप के बाद, स्क्रीन पर छोड़े जाने वाले आर्टिफैक्ट्स के मुद्दे होते हैं और विशेष रूप से अगर उनके पास अपनी अस्पष्टता बदल जाती है, जब तक कि ट्रांसलेशन 3 डी मौजूद न हो! इस लेख ने साइटपॉइंट की

— फिलिप मर्फी

यह सिर्फ मेरे लिए दो निश्चित तत्वों को शामिल करने के लिए एक बहुत ही चिपचिपा मुद्दे को हल करता है, जिसमें एक 3 डी रूपांतरित तत्व है। 3 डी रूपांतरित तत्व मूल रूप से अतिप्रवाह होगा और अन्य तत्व के ऊपर तब तक बैठेगा जब तक कि ऊपर का फिक्स लागू नहीं किया गया था।

— कोलिन जेम्स

काम नहीं करता। केवल तभी काम करता हूं जब मैं कक्षा के अनुसार एनिमेटेड स्टाइल हटाता हूं।

— fdrv

Answer 3

इसके लिए थोड़ा देर से लेकिन उन तत्वों पर डालने की कोशिश करें जिन्होंने अपना जेड-इंडेक्स नीचे रखकर खो दिया है, हाल ही में कुछ लंबन सामग्री करते समय मेरे पास एक मुद्दा था और इससे बड़े पैमाने पर मदद मिली।

transform-style: preserve-3d;

यह डालने से बचाता है

transform: translate3d(0,0,0);

अन्य तत्वों पर जो GPU पर अधिक दबाव डालता है

Comments

जब आपके तत्व 3 डी होते हैं, तो मैं GPU पर अतिरिक्त दबाव डालने के लिए एक परिवर्तन की उम्मीद नहीं करूंगा। गणना की जरूरत वैसे भी होती है। आप इसे किस आधार पर बता रहे हैं?

— मिक्रोस

Answer 4

उदाहरण देखने के लिए प्रतीक्षा कर रहा है

क्या आपने ट्रांसफ़ॉर्म स्केल (1) करने की कोशिश की है? मुझे याद है कि इसी तरह की समस्या थी, और मुझे तत्वों के HTML क्रम को फिर से व्यवस्थित करना था, और एक परिवर्तन का उपयोग करना था, जिसकी मुझे ज़रूरत नहीं थी क्योंकि परिवर्तन के उपयोग का z- सूचकांक बदल गया था।

यदि मैं त्रुटि में नहीं हूं, तो हर बार जब आप किसी परिवर्तन का उपयोग करते हैं, तो यह उच्चतम z-index उपलब्ध हो जाता है, और इसे html के निकटतम तत्व द्वारा आदेशित किया जाता है। तो ऊपर से नीचे तक।

मुझे उम्मीद है कि यह मदद

Answer 5

z-index अगर आप के साथ stackable तत्व शैली 3 डी तब्दील divs के खिलाफ काम करेंगे -webkit-transform: translateZ(0px);

कोडपिन पर स्निपेट -> http://codepen.io/mrmoje/pen/yLIul

उदाहरण में, बटन stack upऔर stack downघुमाए गए तत्व (इस मामले में एक आईजीएम) के खिलाफ पाद के जेड-इंडेक्स (+/- 1) को बढ़ाते हैं और कम करते हैं।

Comments

स्टैक अप को फिर से क्लिक नहीं किया जा सकता है

— क्लेंसेरशन

अरे @ हिमजे मैं भी इस मुद्दे पर सोच रहा हूँ। स्टैक अप अभी भी फिर से क्लिक नहीं किया जा सकता है।

— अल्कुआंग

मैंने अनुवादित तत्व में एक नकारात्मक z-index जोड़ने के बारे में क्यों नहीं सोचा? धन्यवाद

— विल

Answer 6

मैं यहाँ आपके द्वारा बताई गई समस्या का पुनरुत्पादन नहीं कर पाया। चाहे मैं कुछ भी करूँ, सभी परिवर्तनों के दौरान z-index value बरकरार रहती है। मैं क्रोमियम (Google Chrome) का उपयोग करके परीक्षण कर रहा हूं।

Translate3d फ़ंक्शन का तीसरा तर्क तत्व के z- अक्ष में हेरफेर करता है। अवधारणा के समान है, लेकिन बिल्कुल नहीं के रूप में, z- सूचकांक ... कम z- अक्ष वाले तत्व उच्च मूल्य वाले तत्वों के अंतर्गत हैं।

मुझे पता है कि आपने अपने इच्छित z- इंडेक्स से मिलान करने के लिए तीसरे तर्क के मूल्यों की कोशिश की, लेकिन समस्या यह है कि CSS3 के एनीमेशन के दौरान z- अक्ष नहीं बदलता है। निम्नलिखित उदाहरण में, होवर किए गए तत्व शीर्ष पर होना चाहिए, लेकिन #element_a शीर्ष पर रहता है।

यदि मैं नियमित चयनकर्ता और: होवर चयनकर्ता दोनों के लिए एक जेड-इंडेक्स जोड़ता हूं, तो यह काम करने लगता है और होवर किए गए तत्व को सबसे ऊपर रखने की अनुमति देता है।

हालाँकि यह बिल्कुल नहीं है कि आप क्या देख रहे थे, यह व्यवहार एक समाधान प्रदान करता है। आपको प्रारंभिक रेंडरिंग के लिए ऑर्डर सेट करने के लिए सिर्फ ट्रांसलेशन 3 डी और जेड-इंडेक्स का उपयोग करना होगा।

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

Comments

यह मेरे लिए काम किया - धन्यवाद! मैंने निम्नलिखित तत्व को जोड़ा है जिसे मैं 'सामने' होना चाहता हूं: -webkit-transform: Translate3d (0, 0, 1px);

— सैम डटन

Answer 7

इसका एक और तरीका यह है कि आप एक मूल तत्व बना सकते हैं और इससे संबंधित अन्य सभी संक्रमणों को लागू कर सकते हैं:

# 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