css 1px边框在非高密度显示器（视网膜）上显示更厚，带有铬和safari [英] css 1px border appear thicker on non-high density monitors (retina) with chrome and safari

问题描述

当在绝对定位的框上为标题指定1px底部边框，并且框的高度基于百分比时，在非视网膜屏幕上，标题边框将看起来像它的2像素，而在视网膜屏幕上它显示指定的1px边框。此渲染错误只会在Safari和Chrome上显示。对不起，在IE上没有尝试。

 < div class =container 
< div class =box> 
< div class =title>框< / 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; 
} 
  

查看我的

  var $ box3 = $（'＃box3'）; 
 $（window）.resize（function（）{
 var height = $ box3.height（）; 
 var boxOffset = $ box3.offset .log（Box height =+ height）; 
 console.log（Box offset =+ boxOffset）; 
}）; 
  

如果50％translate不是整数（1 - 2 - 3， - 2,1等）浏览器需要填充丢失的像素某处。一些浏览器会填充它的框高度，一些与边框..

这只是我的猜测。它也可以是一个发布候选人属性（翻译），因为当你使用顶部而不是翻译，它工作正常。也许我们应该等待翻译是官方的吗？

Thx的警告btw。

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.

解决方案

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.

这篇关于css 1px边框在非高密度显示器（视网膜）上显示更厚，带有铬和safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！