css 1px border appear thicker on non-high density monitors (retina) with chrome and safari

Question

When specifying a 1px bottom border for a title on a box which is positioned absolutely, and the height of the box is based on percentage, on non-retina screen the title border will look like its 2 px, whereas on retina screen it displays a 1px border as specified. This rendering bug only appears on Safari and Chrome. Sorry haven't try it on 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;
}

Check out my jsfiddle. Also try resizing the browser window and the border on box-3 will change

Box-1 is positioned absolutely, box height specified in pixels.

Box-2 is positioned absolutely, box height specified in pixels, translated -50% in y direction.

Box-3 is positioned absolutely, box height specified in percentage, translated -50% in y direction.

Answer 1

It's not only for 1px, it seems that the bug appears no matter the height of the border.

The bug disappear when you don't use translate;

My thoughts would be that percentage and pixel can be problematic because you can't make a percentage with 1px and it's gonna depend on how the browser will fill the missing pixel.

look at the console: 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);
});

When 50% translate isn't an integer number (1 - 2 - 3, not 1,2 - 2,1 etc) the browser need to fill the missing pixel somewhere. Some browser will fill it in the box height, some with the border..

This is just my guess. It can also be a matter of "release candidate" properties (translate) because when you use "top" instead of "translate", it works fine. Maybe we should wait for translate to be official?

Thx for the warning btw.