लंबवत केंद्र का उपयोग करते समय पूर्ण स्थिति और प्रतिशत का उपयोग करते समय बग

Question

मेरे पास एक div है जो मेरा "पॉपअप" है जिसे मैं अपने मूल div के प्रत्यक्ष केंद्र में दिखाने के लिए एनिमेट कर रहा हूं। तो मैं पूर्ण स्थिति, नकारात्मक मार्जिन, और बाएं + शीर्ष का उपयोग करने के लिए इसका उपयोग कर रहा हूं ताकि मैं इसे होवर पर -webkit-transform: translateY(-100%) के साथ आसानी से एनिमेट कर सकूं। सफारी और मोबाइल सफारी पर बहुत अच्छा काम करता है।

आप Chrome या Firefox में पिक्सल का उपयोग करते हैं यह ठीक काम करता है, भले ही आप सब प्रतिशत का उपयोग लेकिन पिक्सल यह काम करेगा का उपयोग कर माता पिता div चौड़ाई निर्धारित किया है। लेकिन, यदि आप सभी प्रतिशत का उपयोग करते हैं तो एफएफ + क्रोम पूरी तरह से बंक जाता है और प्रतिशत के आधार पर प्रतिशत प्रदान करता है जिसे मैं समझ नहीं सकता।

Fiddle Example: सफारी और एफएफ/क्रोम में देखें यह है कि सफारी renders #pixels#percents के रूप में सिर्फ एक ही है और दोनों में रेंडर किया जाना चाहिए देखने के लिए। क्या यह सफारी है जो इस गलत को प्रस्तुत कर रही है?

<div class="container"> 
    <div class="pretendImage"></div> 
    <div id="percents"></div> 
</div> 

और मेरे सीएसएस:

#percents { 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-50% 0 0 -50%; 
} 
.container { 
    position:relative; 
    width:50%; 
    height:auto; 
} 
.pretendImage { 
    width:200px; 
    height:200px; 
} 

खैर मैं एक अतिरिक्त आवरण को जोड़कर एक वैकल्पिक हल मिल गया। मैं अभी भी जानना चाहता हूं कि इसका क्या कारण है।

My workaround: Fiddle शीर्ष + मार्जिन को 80% चौड़ाई/ऊंचाई का उपयोग करने वाले आंतरिक div की गणना करने से बचने के लिए एक रैपर का उपयोग करता है। अर्थात वर्ग "कंटेनर" के साथ div -

Answer 1

ऊंचाई और शीर्ष प्रतिशत उनके धारक ब्लॉक की ऊंचाई के सापेक्ष हैं। युक्त ब्लॉक की ऊंचाई वर्ग "pretendImage" वर्ग के साथ div की ऊंचाई से निर्धारित होती है।

चौड़ाई, छोड़ दिया और मार्जिन छोड़ दिया प्रतिशत उनके धारक ब्लॉक की चौड़ाई के सापेक्ष हैं - यानी वर्ग "कंटेनर" के साथ div। युक्त ब्लॉक की चौड़ाई को इसके युक्त ब्लॉक के प्रतिशत के रूप में निर्धारित किया जाता है, जो जेएसफ़िल्ड केस में प्रारंभिक युक्त ब्लॉक होता है, जो व्यूपोर्ट की चौड़ाई के समान होता है। ऐसा नहीं है कि आप उन प्रतिशतों की गणना कैसे कर रहे हैं जिनकी आपको आवश्यकता है। आप position:relative (display:inline-block; या float:left;) का उपयोग करने वाले तत्व को लपेटकर इसे संभाल सकते हैं और व्यूपोर्ट में तत्वों को स्थानांतरित करने के लिए बाहर एक और रैपर div बना सकते हैं।

अजीब एक मार्जिन-टॉप (और मार्जिन-तल) प्रतिशत है। ये कंटेनर ब्लॉक के चौड़ाई के सापेक्ष हैं। यह सहायक नहीं है, और इसके बारे में बहुत कुछ किया जा सकता है जब तक कि ब्लॉक में ज्ञात और निश्चित पहलू अनुपात न हो, इस स्थिति में आप चौड़ाई और पहलू अनुपात से आवश्यक ऊंचाई के प्रतिशत मान की गणना कर सकते हैं।

कोई विचार नहीं कि सफारी क्या कर रही है, लेकिन यह गंभीरता से छोटी गाड़ी लगता है।

Answer 2

यहाँ सब का परीक्षण ब्राउज़रों और मोबाइल उपकरणों (क्रोम, आईई, फ़ायरफ़ॉक्स, सफ़ारी, iPad, iPhone 5 और 6, एंड्रॉयड) पर मेरे लिए काम करता है।

मैं तुम्हें बस नीचे दिए गए नियमों को बदलने सभी परिदृश्यों के लिए कवर करने के लिए के पूरे समूह जोड़ने के लिए सुनिश्चित करने की आवश्यकता है।

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%); 
}