-Webkit- परिवर्तन का उपयोग करते समय निश्चित स्थिति काम नहीं करती है

Question

मैं एक div को घुमाने के लिए -webkit-transform (और -moz-transform / -o-transform) का उपयोग कर रहा हूं। इसके अलावा स्थिति तय हो गई है ताकि उपयोगकर्ता के साथ डिव स्क्रोल डाउन हो जाए।

फ़ायरफ़ॉक्स में यह ठीक काम करता है, लेकिन वेबकिट आधारित ब्राउज़रों में यह टूट गया है। -Webkit- परिवर्तन का उपयोग करने के बाद, निर्धारित स्थिति अब काम नहीं करती है! वो कैसे संभव है?

Comments

एक डेमो पेज अक्सर लोगों को सवालों के जवाब देने में मदद करता है - jsbin.com आपको समस्या को स्पष्ट करने के लिए अस्थायी पृष्ठ बनाता है यदि आप अपनी साइट से लिंक नहीं करना चाहते हैं।

— रिच ब्रैडशॉ

jsfiddle.net एक अस्थायी संपादन बिन का एक और अच्छा उदाहरण है।

— काइल

@ रीच ब्रैडशॉ jsbin.com बहुत अच्छा है। यह अब तक पता नहीं था। मेरी अधिकांश परियोजनाएं स्थानीय चलती हैं, इसलिए मैं अगली बार इसका उपयोग करूंगा। Tnx

— iSenne

यह फ़ायरफ़ॉक्स में बिल्कुल भी ठीक काम नहीं करता है ।

— vsync

2017 में अभी भी एक मुद्दा है। लगता है कि वे अभी भी "यह एक बग नहीं है एक सुविधा है!" तर्क ...

— मैक्स

Answer 1

कुछ शोधों के बाद, इस मुद्दे के बारे में क्रोमियम वेबसाइट पर एक बग रिपोर्ट दी गई है , अब तक वेबकिट ब्राउज़र एक ही समय में इन दोनों प्रभावों को एक साथ प्रस्तुत नहीं कर सकते हैं।

मैं आपको अपनी स्टाइलशीट में केवल कुछ वेबकिट सीएसएस जोड़ने और ट्रांसफॉर्म किए गए डिव को एक छवि बनाने और पृष्ठभूमि के रूप में उपयोग करने का सुझाव दूंगा।

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

तो अब के लिए आपको इसे पुराने तरीके से करना होगा, जब तक कि वेबकिट ब्राउज़र FF तक न पकड़ ले।

संपादित करें: 10/24/2012 तक बग को हल नहीं किया गया है।

---

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

Comments

अधिक वर्षों के बाद भी, अभी भी हल नहीं हुआ है। बहुत दुख की बात है।

— अमलगोविनास

इस उत्तर के अनुसार यह बग नहीं बल्कि कल्पना का हिस्सा है।

— माइकल क्रिस्टन

वापस बैठो और देखो - मुझे यकीन है कि यह अपनी 10 साल की सालगिरह के लिए जीवित रहेगा

— lzl124631x

अगस्त 30, 2017, कप्तान की लॉग। हमने अजीब विसंगति का भी सामना किया है, जिसका वर्णन अन्य कप्तानों द्वारा बहुत पहले किया गया था। एक समाधान अभी भी लागू किया जाना है।

— ल्यूकोराइज़ करें

यह वह बग है जिसके बारे में मेरे पिता के पिता ने मुझे चेतावनी दी थी।

— danjones_mcr

Answer 2

सीएसएस Transforms कल्पना इस व्यवहार बताते हैं। ट्रांसफ़ॉर्म वाले तत्व स्थिर स्थिति वंशजों के लिए एक ब्लॉक के रूप में कार्य करते हैं, इसलिए स्थिति: एक परिवर्तन के साथ कुछ के तहत तय किया गया है अब व्यवहार निर्धारित नहीं है।

वे उसी तत्व पर लागू होने पर काम करते हैं; तत्व के रूप में तय किया जाएगा, और फिर बदल दिया।

Comments

यह एकमात्र सहायक और सही उत्तर है। मूल तत्व का अनुवाद करना बंद कर दें और उन बच्चों का अनुवाद करें जहाँ निश्चित तत्व इसका हिस्सा है। : यहाँ मेरी बेला है JSFIDDLE

— फाल्क

और क्या होगा अगर मैं एक निश्चित तत्व को भी बदलना चाहता हूं?

— मार्क

Answer 3

जो कोई भी अपनी पृष्ठभूमि छवियां पाता है, उनके लिए Chrome में पृष्ठभूमि-अनुलग्नक के साथ एक ही समस्या के कारण गायब हो रहे हैं: निश्चित; - यह मेरा समाधान था:

// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    // set background-attachment back to the default of 'scroll'
    $('.imagebg').css('background-attachment', 'scroll');

    // move the background-position according to the div's y position
    $(window).scroll(function(){

        scrollTop = $(window).scrollTop();
        photoTop = $('.imagebg').offset().top;
        distance = (photoTop - scrollTop);
        $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

    });
}  

Answer 4

कुछ (थोड़ा सा हैकी) जो मेरे लिए काम कर रहा था वह है position:sticky:

.fixed {
     position: sticky;
}

Comments

updates.html5rocks.com/2012/08/… आह हाँ .. लेकिन अच्छी तरह से समर्थित अभी तक ऐसा नहीं लगता है

— coiso

चिपचिपा अलग है। मुख्य समस्या यह है कि निश्चित रूप से हम कंटेनर की स्थिति (बहुत उपयोगी के लिए अस्पष्टता एनिमेशन के लिए) को अनदेखा करना चाहते हैं। मुझे विश्वास नहीं हो रहा है कि यह बग अभी भी वर्षों बाद है। भयानक।

— फ्लोरियनबी

Answer 5

अगस्त 2016 और निश्चित स्थिति और एनीमेशन / परिवर्तन अभी भी एक समस्या है। मेरे लिए काम करने वाला एकमात्र समाधान - बच्चे के तत्व के लिए एक एनीमेशन बनाना था जिसमें अधिक समय लगता है।

Comments

कृपया नए प्रश्नों के उत्तर दें। 2010 में सवाल पूछने वाले व्यक्ति के बजाय उन सवालों की आपको अधिक आवश्यकता है। उन्होंने अब तक इस समस्या को हल किया होगा, आपको नहीं लगता? साथ ही इस प्रश्न का पहले से ही स्वीकृत उत्तर है।

— उमर फारूक

नहीं! यह अभी भी एक समस्या है ... सवाल पूछने वाले को शायद कोई दूसरा उपाय मिल गया हो - लेकिन मुझे यह एक कारण लगा।

— डिफ्लेग्रा

जैसी आपकी इच्छा। मैंने लोगों द्वारा पहले प्रश्नों की समीक्षा करते हुए उस टिप्पणी को छोड़ दिया। और चूँकि आप आज ही शामिल हुए हैं और यह आपका पहला उत्तर था और देर से उत्तर भी इसलिए मैंने वह टिप्पणी छोड़ दी। मैं नीचे नहीं था। जो आपके लिए एक अच्छा मौका है।

— उमैर फारूक

@UmairFarooq शायद एक और सवाल पूछना बेकार होगा क्योंकि इसे डुप्लिकेट के रूप में चिह्नित किया जा सकता है। मैं सिर्फ एक Google खोज के साथ यहां आया था और मुझे यह सवाल उपयोगी लगा, डिफालिग जवाब भी।

— कोमा

Answer 6

वास्तव में मुझे इस "बग" को ठीक करने का एक और तरीका मिला:

मेरे पास कंटेनर तत्व है जो पृष्ठ को css3 एनिमेशन के साथ रखता है। जब पृष्ठ ने एनीमेशन पूरा किया, तो css3 संपत्ति का मूल्य है: रूपांतर: अनुवाद (0,0); इसलिए, मैंने अभी इस लाइन को हटा दिया है, और सब कुछ काम करना चाहिए - स्थिति: ठीक से प्रदर्शित किया गया है। जब पृष्ठ का अनुवाद करने के लिए सीएसएस क्लास लागू किया जाता है, तो अनुवाद संपत्ति जोड़ दी जाती है और सीएसएस 3 एनीमेशन भी काम करता है।

उदाहरण:

.page {
     top: 50px;
     position: absolute;
     transition: ease 0.6s all;
     /* -webkit-transform: translate(0, 0); */
     /* transform: translate(0,0); */
 }
 .page.hide {
     -webkit-transform: translate(100%, 0);
     transform: translate(-100%, 0);    
 }

डेमो: http://jsfiddle.net/ZWcD9/

Comments

मेरे लिए, इन शैलियों के रैपर पर स्थिर तत्व होने का तथ्य था जो निश्चित को चिपचिपा होने से रोक रहा था: -वेबकिट-परिप्रेक्ष्य: 1000; -webkit- परिवर्तन-शैली: संरक्षण -3 डी; इन को बंद कर दिया और सब कुछ ठीक काम करता है। वे वैसे भी संदिग्ध अनुकूलन थे!

— Amalgovinus

किसी भी तरह से ट्रांसफ़ॉर्मेशन को हटाना, शायद अब तक का सबसे अच्छा वर्कअराउंड है। फीका-इन जैसा कुछ, एक बार पूरा होने के बाद, तत्व की उपस्थिति को प्रभावित किए बिना हटाने योग्य होना चाहिए। असल में, मुझे यकीन नहीं है कि एक ट्रांसफ़ेक्स (0) के चारों ओर लटकने से प्रदर्शन का प्रतिपादन करना होगा, अगर कुछ भी हो; यह या तो नजरअंदाज किया जा सकता है, या प्रदर्शन को चोट पहुंचा सकता है, या किसी प्रकार के 3 डी त्वरण के लिए मजबूर करके इसे बेहतर बना सकता है। कौन जाने। किसी भी मामले में, एक बार एक एनीमेशन पूरा हो जाने के बाद, या उससे पहले एक निश्चित तत्व को जोड़ने से पहले भी, कोई बस ट्रांस्फ़ॉर्म के लिए CSS कक्षाएं निकाल सकता है।

— त्रिनको

Answer 7

मेरे फोनगैप प्रोजेक्ट पर वेबकिट ट्रांसफ़ॉर्म -webkit- ट्रांसफ़ॉर्म: ट्रांसलेट (0); एक जादू की तरह काम किया। यह पहले से ही क्रोम और सफारी में काम कर रहा था न कि मोबाइल ब्राउज़र। यह भी एक और मुद्दा हो सकता है WRAPPER DIV कुछ मामलों में पूरा नहीं हुआ है। फ्लोटिंग DIV के मामले में हम स्पष्ट वर्ग लागू करते हैं।

<div class="Clear"></div> .Clear, .Clearfix{clear:both;}

Answer 8

संभवतः क्रोम में बग के कारण क्योंकि मैं सफारी या फ़ायरफ़ॉक्स में दोहरा नहीं सकता, लेकिन यह क्रोम में 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output पर काम करता है

यह एक बहुत ही विशेष संरचना है, इसलिए इसका कोई मतलब नहीं है कि एक सार्वभौमिक रूप से लागू एक-पंक्तिबद्ध सीएसएस फिक्स है, लेकिन शायद कोई इसे सफारी और फ़ायरफ़ॉक्स में काम करने के लिए इसके साथ छेड़छाड़ कर सकता है।

Answer 9

मेरे पास यह मुद्दा था जब रिएक्शन-कलर को रिएक्शन-स्वाइप करने योग्य-व्यू (rsw) के साथ लागू करने की कोशिश की जा रही थी। मेरे लिए समस्या यह थी कि rsw translate(-100%, 0)एक टैब पैनल पर लागू होता है जो फुल स्क्रीन पर जोड़े गए डिफ़ॉल्ट फिक्स्ड पोज़िशन डिव को तोड़ता है जिसे क्लिक करने पर कलर पिकर मॉडल बंद हो जाता है।

मेरे लिए समाधान तय तत्व के विपरीत परिवर्तन लागू करना था (इस मामले में translate(100%, 0)जिसने मेरा मुद्दा तय किया। मुझे यकीन नहीं है कि यह अन्य मामलों में उपयोगी है, लेकिन मुझे लगता है कि मैं वैसे भी साझा करूंगा।

यहाँ एक उदाहरण दिखाया गया है जो मैंने ऊपर वर्णित किया है:

https://codepen.io/relativemc/pen/VwweEez

Answer 10

-webkit-transformनिश्चित तत्व में जोड़ने से मेरे लिए समस्या हल हो गई।

.fixed_element {
   -webkit-transform: translateZ(0);
   position: fixed;
   ....
} 

Comments

यह मेरे लिए काम नहीं किया। क्या आप इसमें काम करने का डेमो बनाने में सक्षम हैं?

— एलेक्स

इसने मेरे लिए Chrome, FWIW में एक समस्या तय की। धन्यवाद रॉन।

— क्रिस

धन्यवाद, इसने मुझे एक मुद्दा तय किया। मेरी ज़िंदगी बचाई!

— स्टाइल

@ नील मुनरो, एंड्रॉइड 2.3 एक पूरी नई कहानी है। यह निश्चित स्थिति का समर्थन नहीं करता है :)

— विजमन

यहाँ एक Fiddle है जहाँ काम translateZ(0) नहीं करता है। यह सच है कि यह कभी-कभी काम करता है, मैंने ऐसे अवसर देखे हैं जहां यह काम करता है। लेकिन मैं अभी भी इसे कम नहीं कर सकता।

— ज़ीक्ज़

Answer 11

यहाँ मेरे लिए सभी परीक्षण किए गए ब्राउज़रों और मोबाइल उपकरणों (Chrome, IE, Firefox, Safari, iPad, iPhone 5 और 6, Android) पर काम किया गया है।

img.ui-li-thumb {
    position: absolute;
    left: 1px;
    top: 50%;

    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

Comments

क्यों घटता है? यह अच्छा होगा यदि आपने एक टिप्पणी की है कि आपने मेरे जवाब को वोट क्यों दिया?

— मर्फ़

Answer 12

यदि आप किसी पूर्वज में परिवर्तन लागू करते हैं तो एक तत्व की निश्चित स्थिति टूट जाती है।

<div style='position:fixed;-.*-transform:scale(2)'>...</div> //ok

<div style='-.*-transform:scale(2)'>
      <div style='position:fixed'>...</div> // broken
</div>

Answer 13

यदि आप एक विकल्प के रूप में जावास्क्रिप्ट का उपयोग कर सकते हैं, तो यह स्थिति में तत्व को बदलने के लिए एक वैकल्पिक हल हो सकता है जब यह एक परिवर्तित तत्व के अंदर होता है।

  let fixedEl // some node that you is position 
              // fixed inside of an element that has a transform

  const rect = fixedEl.getBoundingClientRect()
  const distanceFromWindowTop = rect.top
  const distanceFromWindwoLeft = rect.left
  let top = fixedEl.offsetTop
  let left = fixedEl.offsetLeft

  if(distanceFromWindowTop !== relativeTop) {
    top = -distanceFromWindowTop
    fixedEl.style.top = `${top}px`
  }

  if(distanceFromWindowLeft !== relativeLeft) {
    left = -distanceFromWindowLeft
    fixedEl.style.left = `${left}px`
  }

दी है कि आपको अपनी ऊंचाइयों और चौड़ाई को समायोजित करना fixedElहोगा क्योंकि यह गणना करेगा कि यह कंटेनर पर आधारित है। यह आपके उपयोग के मामले पर निर्भर करता है, लेकिन यह आपको कंटेनर की परवाह किए बिना, निश्चित रूप से कुछ स्थिति निर्धारित करने की अनुमति देगा।

Answer 14

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

.translatX(@x) { 
     -webkit-transform: translateX(@X); 
             transform: translateX(@x);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

फिर

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

फिर

.transformed {
    #elementId { 
        .translateX(@neededValue);
    }
}

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

Answer 15

मेरे मामले में मुझे पता चला कि हम ट्रांसफॉर्म का उपयोग नहीं कर सकते: ट्रांसफॉर्म (ट्रांसफॉर्म करने से पहले): ट्रांसलाइ ()। यदि हम दोनों का उपयोग करना चाहते हैं तो हमें ट्रांसफॉर्म का उपयोग करना चाहिए: ट्रांसलेशन (,)।

Answer 16

कृपया मतदान न करें, क्योंकि यह सटीक उत्तर नहीं है, लेकिन किसी की मदद कर सकता है क्योंकि यह केवल परिवर्तन को बंद करने का तेज़ तरीका है। यदि आपको वास्तव में माता-पिता पर परिवर्तन की आवश्यकता नहीं है और आप चाहते हैं कि आपकी नियत स्थिति फिर से काम करे:

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

Comments

यह, जैसे, वास्तव में प्रश्न के शीर्षक में है

— यूजीन पैंकोव

@EugenePankov शीर्षक में 'कोई नहीं' देखें। यह वही था जिसने मेरी समस्या को ठीक कर दिया और सामान्य तौर पर कोई भी इसे बंद करने का सुझाव नहीं देता है। यद्यपि यह उस प्रश्न का सटीक उत्तर नहीं है, लेकिन यह किसी ऐसे व्यक्ति की मदद कर सकता है जो परिवर्तन का उपयोग नहीं करना चाहता है और परिवर्तन किसी अन्य पुस्तकालय से आता है। इसलिए मैं वोट नहीं चाहता, लेकिन कृपया वोट कम न करें। मैं अपने प्रश्न को यह कहने के लिए संपादित करूंगा कि मुझे वोट नहीं चाहिए।

— मकासी