css Obramowanie 1px jest grubsze na monitorach o niskiej gęstości (siatkówka) z chromem i safari

Question

Podczas określania dolnego obramowania 1px dla tytułu w polu, które jest ustawione absolutnie, a wysokość ramki jest określana na podstawie procentowej wartości, na ekran nie-siatkówkowy będzie wyglądał jak 2 px, podczas gdy na ekranie siatkówki wyświetla granicę 1px zgodnie z opisem. Ten błąd renderowania pojawia się tylko w Safari i Chrome. Niestety nie próbowałem tego na IE.

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

Sprawdź mój jsfiddle. Spróbuj również zmienić rozmiar okna przeglądarki, a obramowanie w polu-3 zmieni się:

Pole-1 jest ustawione absolutnie, wysokość pola określona w pikselach.

Box-2 jest umieszczony absolutnie, wysokość pudełka określona w pikselach, przetłumaczona na -50% w kierunku y.

Box-3 jest pozycjonowany absolutnie, wysokość pudełka określona w procentach, przetłumaczona na -50% w kierunku y.

Answer 1

to nie tylko dla 1px, wydaje się, że błąd pojawia się bez względu na wysokość granicy.

Błąd znika, gdy nie używasz translate;

Moje myśli to procent, a piksel może być problematyczny, ponieważ nie można zrobić procentu z 1px i zależy to od tego, jak przeglądarka wypełni brakujący piksel.

spojrzenie na konsoli: 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); 
}); 

Przy 50% tłumaczyć nie jest to liczba całkowita (1 - 2 - 3, a nie 1,2 - 2,1 itd) potrzeba przeglądarki, aby wypełnić brakujący piksel gdzieś. Niektóre przeglądarki wypełnią ją w polu wysokości, niektóre z ramką ..

To tylko moje przypuszczenie. Może to być również kwestia właściwości "release candidate" (translate), ponieważ kiedy używasz "top" zamiast "translate", to działa dobrze. Może powinniśmy poczekać, aż tłumaczenie będzie oficjalne?

Thx za ostrzeżenie btw.

Answer 2

miałem ten problem wizualny granicznego w Chrome, kiedy starałem się pokazać granicę z elementu przęsła:

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

przełączyć to regularne border-bottom i to naprawić problem wizualizacji.

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

widzę w swoim przykładzie, że używasz stylów obramowania, ale i tak myślę, że ta informacja może być pomocne!

Pozdrawiam!