सीएसएस 1px का बॉर्डर क्रोम और सफारी के साथ गैर उच्च घनत्व पर नज़र रखता है (रेटिना) पर मोटा दिखाई

Question

जब एक बॉक्स है जो बिल्कुल स्थिति में है, और बॉक्स की ऊंचाई पर एक शीर्षक के लिए 1px निचली सीमा को निर्दिष्ट प्रतिशत के आधार पर, पर है गैर-रेटिना स्क्रीन शीर्षक सीमा 2 पीएक्स की तरह दिखाई देगी, जबकि रेटिना स्क्रीन पर यह निर्दिष्ट 1px सीमा प्रदर्शित करता है। यह प्रतिपादन बग केवल सफारी और क्रोम पर दिखाई देता है। क्षमा करें आईई पर कोशिश नहीं की है।

<div class="container"> 
    <div class="box"> 
    <div class="title">box</div> 
    </div> 
</div> 

.container { 
    width: 100%; 
    height: 100%; 
} 

.box { 
    width: 100px; 
    height: 25%; 
    position: absolute; 
    top: 50px; 
    left: 50px; 
    border: 1px solid black; 
    -webkit-transform: translate(0, 50%); 
    -ms-transform: translate(0, 50%); 
    transform: translate(0, 50%); 
} 

.title { 
    border-bottom: 1px solid blue; 
    margin: 5px; 
    height: 20px; 
} 

मेरा jsfiddle देखें। ब्राउज़र विंडो का आकार बदलने का प्रयास करें और बॉक्स -3 पर सीमा

बॉक्स -1 को बिल्कुल पिक्सेल में निर्दिष्ट बॉक्स ऊंचाई निर्दिष्ट किया गया है।

बॉक्स -2 बिल्कुल स्थिति में है, बॉक्स ऊंचाई पिक्सेल में निर्दिष्ट, वाई दिशा में -50% अनुवाद।

बॉक्स -3 बिल्कुल स्थिति में है, बॉक्स ऊंचाई प्रतिशत में निर्दिष्ट, वाई दिशा में -50% अनुवाद।

Answer 1

यह न केवल 1px के लिए, यह बग कोई फर्क नहीं पड़ता सीमा की ऊंचाई प्रतीत होता है कि लगता है है।

बग गायब हो जाते हैं जब आप अनुवाद का उपयोग नहीं करते;

मेरे विचार होगा क्योंकि आप 1px साथ एक प्रतिशत नहीं कर सकता है कि प्रतिशत और पिक्सेल समस्या हो सकती है और इसके लिए हम कैसे ब्राउज़र लापता पिक्सेल भर जाएगा पर निर्भर है। कंसोल पर

देखो: (- 2 - 3, नहीं 1,2 - 2,1 आदि 1) को भरने के लिए ब्राउज़र की जरूरत http://jsfiddle.net/9xLjx1zy/3/

var $box3 = $('#box3'); 
$(window).resize(function(){ 
    var height = $box3.height(); 
    var boxOffset = $box3.offset().top; 
    console.log("Box height = "+height); 
    console.log("Box offset = "+boxOffset); 
}); 

जब 50% का अनुवाद एक पूर्णांक संख्या नहीं है कहीं पिक्सेल गायब है। कुछ ब्राउज़र .. बॉक्स ऊंचाई, सीमा के साथ कुछ में यह भर जाएगा

यह सिर्फ मेरा अनुमान है। यह "रिलीज उम्मीदवार" गुणों (अनुवाद) का विषय भी हो सकता है क्योंकि जब आप "अनुवाद" के बजाय "शीर्ष" का उपयोग करते हैं, तो यह ठीक काम करता है। शायद हमें आधिकारिक होने के लिए अनुवाद का इंतजार करना चाहिए?

चेतावनी बीटीडब्ल्यू के लिए Thx।

Answer 2

मैं Chrome में इस दृश्य सीमा मुद्दा था, जब मैं स्पान तत्व के साथ सीमा को दिखाने के लिए कोशिश कर रहा था:

<span style="height: 1px; background: red"></span> 

मैं नियमित रूप से सीमा-नीचे के साथ इस स्विच और इस दृश्य समस्या का समाधान हो।

<span style="height: 0px; border-bottom: 1px solid red"></span> 

मैं आपके उदाहरण में देखता हूं कि आप सीमा शैलियों का उपयोग कर रहे हैं, लेकिन फिर भी मुझे लगता है कि यह जानकारी सहायक हो सकती है!

चीयर्स!