'ट्रांसफॉर्म 3 डी' स्थिति के साथ काम नहीं कर रहा है: फिक्स्ड बच्चे

Question

मेरे पास एक ऐसी स्थिति है, जहां सामान्य सीएसएस परिस्थितियों में, एक निश्चित div को उसी स्थान पर स्थित किया जाएगा जहां यह निर्दिष्ट किया गया है ( top:0px, left:0px)।

यदि मेरे पास एक ऐसा माता-पिता है, जिसका ट्रांसलेशन 3 डी ट्रांसफ़ॉर्म है, तो यह सम्मानित नहीं लगता है। क्या मुझे कुछ दिखाई नहीं दे रहा है? मैंने स्टाइल की तरह अन्य वेबकिट-ट्रांसफ़ॉर्म की कोशिश की है और मूल विकल्पों को बदल दिया है, लेकिन कोई भाग्य नहीं था।

मैंने एक JSFiddle को एक उदाहरण के साथ संलग्न किया है, जहां मुझे उम्मीद थी कि कंटेनर तत्व के अंदर पीले बॉक्स पेज के शीर्ष कोने पर होंगे।

आप फिडेल के सरलीकृत संस्करण के नीचे पा सकते हैं:

#outer {
    position:relative; 
    -webkit-transform:translate3d(0px, 20px , 0px); 
    height: 300px; 
    border: 1px solid #5511FF; 
    padding: 10px;
    background: rgba(100,180,250, .8); 
    width: 80%;
}
#middle{
    position:relative; 
    border: 1px dotted #445511; 
    height: 300px; 
    padding: 5px;
    background: rgba(250,10,255, .6);
}
#inner {
    position: fixed; 
    top: 0px;
    box-shadow: 3px 3px 3px #333; 
    height: 20px; 
    left: 0px;
    background: rgba(200,180,80, .8); 
    margin: 5px; 
    padding: 5px;
}

<div id="container">
    Blue: Outer, <br>
    Purple: Middle<br>
    Yellow: Inner<br>
    <div id="outer"> 
        <div id="middle">
            <div id="inner">
                Inner block
            </div>
        </div>
    </div>
</div>

मैं कैसे नियत-नियत बच्चों के साथ अनुवाद 3 डी काम कर सकता हूँ?

Comments

समान समस्या फ़िल्टर के साथ भी होती है: stackoverflow.com/q/52937708/8620333

— तैमनी आफ़िफ़

Answer 1

ऐसा इसलिए है क्योंकि W3C कल्पना केtransform अनुसार एक नया स्थानीय समन्वय प्रणाली बनाता है :

HTML नामस्थान में, noneएक स्टैकिंग प्रसंग और एक युक्त ब्लॉक दोनों के निर्माण के परिणाम के अलावा कोई भी मूल्य । ऑब्जेक्ट स्थिर तैनात वंशज के लिए युक्त ब्लॉक के रूप में कार्य करता है।

इसका मतलब यह है कि व्यूपोर्ट की बजाय फिक्स्ड पोजिशनिंग ट्रांसफॉर्मेड एलिमेंट के लिए फिक्स्ड हो जाती है।

वर्तमान में ऐसा कोई काम नहीं है जिसके बारे में मुझे पता हो।

यह एरिक मेयर के लेख पर भी दर्ज किया गया है: सीएसएस ट्रांसफॉर्म के साथ फिक्स्ड एलीमेंट्स ।

Comments

धन्यवाद, मैंने देखा नहीं था कि वास्तविक विनिर्देशन में वह जानकारी थी ..... मुझे लगता है कि मुझे गणितीय उत्तर के बराबर मिला: "परिभाषा के अनुसार" :)

— जुआन कार्लोस मोरेनो

@ नहीं, मुझे नहीं लगता कि इसके लिए कोई वर्कअराउंड होने जा रहा है। वर्कअराउंड की अनुमति नहीं देने के लिए एक प्रमुख उपयोग-मामला है: उपयोगकर्ता द्वारा प्रदान किया गया इनपुट संभावित रूप से उनके निर्दिष्ट क्षेत्र के बाहर नियंत्रण को कवर कर सकता है (एक दुर्भावनापूर्ण ईमेल को जीमेल टूलबार में विकल्प जोड़ने पर विचार करें)। यदि आप इसके अंदर से तय किए गए उपयोग करने जा रहे हैं तो समय के लिए परिवर्तनों से बचने के लिए सबसे अच्छा समाधान होगा।

— saml

जो भी काम करने के लिए CSS शीर्ष विशेषता सेट नहीं करेगा। आप इसे पूरी तरह से स्थिति के रूप में अच्छी तरह से हो सकता है, लेकिन इस तरह से कुछ करना चाहिए, नहीं? (वास्तव में अभी परीक्षण करने के लिए बहुत आलसी)

— ब्रैड ओरेगो

@bradorego आप सही थे, मैंने अभी अपने द्वारा उपयोग किए गए कोड को जोड़ा।

— उज़ुमाकीदेव 25

यह अभी भी कल्पना में प्रवाह में है जहां तक ​​मैं बता सकता हूं। बग 16328 देखें - "युक्त ब्लॉक" का उपयोग CSS2.1 परिभाषा से मेल नहीं खाता है ।

— थर्डेंडर

Answer 2

जब पृष्ठ में आइटम परिवर्तन का उपयोग कर रहे थे, तो मैंने अपने निश्चित शीर्ष नौसेना पर एक टिमटिमा किया था, मेरे शीर्ष नौ पर लागू होने से जंपिंग / फ़्लिकरिंग समस्या हल हो गई:

#fixedTopNav {
    position: fixed;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

एसओ पर इस जवाब के लिए धन्यवाद

Answer 3

जैसा कि ब्रैडेरगो ने सुझाव दिया, बस खिड़की प्राप्त करें scrollTopऔर इसे पूर्ण स्थिति में जोड़ें जैसे शीर्ष:

function fix_scroll() {
  var s = $(window).scrollTop();
  var fixedTitle = $('#fixedContainer');
  fixedTitle.css('position','absolute');
  fixedTitle.css('top',s + 'px');
}fix_scroll();

$(window).on('scroll',fix_scroll);

यह मेरे लिए वैसे भी काम करता था।

Comments

यह काम करता हैं! लेकिन "विंडो" से बंधने के बजाय, मुझे उस div को बांधना पड़ा जो स्क्रॉल कर रही थी। इसके अलावा, तय तत्व झिलमिलाता है।

— ट्रेन

JQuery का यहाँ क्या करना है?

— फ्लोरियनबी

यह किया जा सकता था, लेकिन @train का उल्लेख किया गया था, यह टिमटिमाता है।

— एटिएन डुप्स्यूस

हाँ, यह मेरे उपयोग के लिए पर्याप्त साफ होने के लिए पर्याप्त तेजी से पास अपडेट नहीं करता है: - / अच्छा विचार थो

— रीड

यह बहुत बुरा अभ्यास है, js के साथ स्टाइल में बदलाव न करें

— Wannes

Answer 4

फ़ायरफ़ॉक्स और सफारी में आप position: sticky;इसके बजाय उपयोग कर सकते हैं position: fixed;लेकिन यह अन्य ब्राउज़रों में काम नहीं करेगा। उसके लिए आपको जावास्क्रिप्ट की आवश्यकता है।

Comments

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

— फ़ारसाइड

फ़ायरफ़ॉक्स और सफारी पर AFAIK आप बस उपयोग कर सकते हैं position:fixedऔर यह वैसे भी काम करेगा।

— ओरियाडाम

@oriadam नहीं, मेरे पास समस्या है जब अभिभावक Transl3d का उपयोग करते हैं और बच्चों की निश्चित स्थिति कुछ मामलों में चारों ओर उड़ रही है। stickyजब यह पहले से ही प्रमुख ब्राउज़रों द्वारा समर्थित है, तो उपयोग करने का प्रयास करेगा : caniuse.com/#feat=css-sticky

— Lukas Liesis

stickyयह एक समाधान हो सकता है, यह आधुनिक ब्राउज़र पर काम करता है।

— 18:18

Answer 5

मेरी राय में, इससे निपटने का सबसे अच्छा तरीका वही अनुवाद लागू करना है, लेकिन उन बच्चों को तोड़ना है जिन्हें उनके माता-पिता (अनुवादित) तत्व से बाहर करने की आवश्यकता है; और फिर position: fixedआवरण के अंदर एक div में अनुवाद लागू करें ।

परिणाम कुछ इस तरह दिखते हैं (आपके मामले में):

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 

</div>
<div style='position: fixed; top: 0px; 
            box-shadow: 3px 3px 3px #333; 
            height: 20px; left: 0px;'>
    <div style='-webkit-transform:translate3d(0px, 20px, 0px);'>
        Inner block
    </div>
</div>

JSFiddle: https://jsfiddle.net/hju4nws1/

हालांकि यह कुछ उपयोग के मामलों के लिए आदर्श नहीं हो सकता है, आमतौर पर यदि आप एक डिव को ठीक कर रहे हैं, तो आप शायद इस बात की कम परवाह कर सकते हैं कि इसका मूल क्या है / यह आपके डोम में विरासत के पेड़ में कहां गिरता है, और लगता है कि अधिकांश सिरदर्द को हल करने के लिए। - जबकि अभी भी दोनों की इजाजत दी translateऔर position: fixedमें (सापेक्ष) सद्भाव रहने के लिए।

Answer 6

मैं उसी समस्या को लेकर भागा। एकमात्र अंतर यह है कि 'स्थिति: निश्चित' के साथ मेरे तत्व की अपनी 'शीर्ष' और 'बाईं' शैली के गुण जेएस से निर्धारित किए गए थे। इसलिए मैं एक फिक्स लागू करने में सक्षम था:

var oRect = oElement.getBoundingClientRect();

ORect ऑब्जेक्ट में वास्तविक (पोर्ट देखने के सापेक्ष) शीर्ष और बाएं निर्देशांक होंगे। तो आप अपने वास्तविक oElement.style.top और oElement.style.left गुणों को समायोजित कर सकते हैं।

Comments

यह IE और Chrome पर काम करता है, लेकिन Android मानक ब्राउज़र पर नहीं। बाईं ओर एक संख्या है लेकिन इसे हमेशा 0

— Adaptabi

Answer 7

मेरे पास एक ऑफ कैनवास साइडबार है, जो -webkit- ट्रांसफॉर्म का उपयोग करता है: Transl3d। यह मुझे पृष्ठ पर एक निश्चित पाद लेख रखने से रोक रहा था। मैंने html पृष्ठ पर एक वर्ग को लक्षित करके समस्या को हल किया जो साइडबार के आरंभीकरण पर टैग में जोड़ा गया है और फिर एक सीएसएस लिख रहा है: राज्य के लिए योग्य नहीं "-webkit-transform: none;" html टैग जब html टैग पर वह क्लास मौजूद नहीं है। आशा है कि यह इस मुद्दे के साथ वहाँ किसी को मदद करता है!

Answer 8

बाल तत्व में विपरीत परिवर्तन लागू करने का प्रयास करें:

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(-100%, 0px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

Answer 9

तत्व में परिवर्तन होने पर एक गतिशील वर्ग जोड़ें। $('#elementId').addClass('transformed')। फिर सीएसएस में घोषणा करें,

.translat3d(@x, @y, @z) { 
     -webkit-transform: translate3d(@X, @y, @z); 
             transform: translate3d(@x, @y, @z);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

फिर

#elementId { 
      -webkit-transform: none; 
              transform: none;
}

फिर

.transformed {
    #elementId { 
        .translate3d(0px, 20px, 0px);
    }
}

अब position: fixedजब बच्चे के तत्व पर एक topऔर z-indexसंपत्ति मूल्यों के साथ प्रदान किया जाता है तो बस ठीक काम करते हैं और तब तक स्थिर रहते हैं जब तक कि मूल तत्व बदल नहीं जाता। जब परिवर्तन फिर से तय हो गया है तो बाल तत्व पॉप वापस आ जाता है। यह उस स्थिति को आसान कर सकता है यदि आप वास्तव में एक नेविगेशन साइडबार का उपयोग कर रहे हैं जो एक क्लिक पर खुले और बंद हो जाता है, और आपके पास एक टैब-सेट है जो पृष्ठ को स्क्रॉल करते समय चिपचिपा रहना चाहिए।

Answer 10

इससे निपटने का एक तरीका यह है कि एक ही तत्व को निर्धारित तत्व पर लागू किया जाए:

<br>
<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(0px, 20px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

Comments

IE बग में पहले स्थान पर मौजूद नहीं है

— oriadam