CODEWITHSUNDEEP
cssgoogle-chromesafariwebkit
ferndopolis
ferndopolis

Reputation: 1117

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

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.

screen shot example

Upvotes: 9

Views: 3727

Answers (4)

Geat
Geat

Reputation: 1209

This issue is still happening in Chrome in 2022. In my scenario I was vertically centering a fixed position div using the top 50%, translateY -50% trick. An element with a border inside the div was appearing blurred and double-thickness.

It boiled down to the container element having an uneven height, and how Chrome was calculating its rendering. In my particular scenario the content doesn't need to be fluid, so I was able to fix it by setting the height of the container to the next nearest even number (the natural browser height was 350.922px, so I set it to 352px).

Before and after applying the even height

Upvotes: 1

Matheus Grundler
Matheus Grundler

Reputation: 1

You use border-top: 0.1px solid {color}; in order to make the border thinner than 1px. It works for me :)

Upvotes: 0

Kaloyan Stamatov
Kaloyan Stamatov

Reputation: 4024

I had this visual border issue in Chrome, when I was trying to show border with span element:

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

I switch this with regular border-bottom and this fixed the visualization issue.

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

I see in your example that you are using border styles, but anyway I think this info could be helpful!

Cheers!

Upvotes: 1

Gbreux
Gbreux

Reputation: 371

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.

Upvotes: 1

Related Questions