How do I disable sub-pixel rendering or force the browser to round properties to the nearest pixel?

user_19070375 0
Viewed 83

My problem as stated in the title is about chrome's sub-pixel rendering. Sometimes you want the browser to determine an element's proper height or width so it takes up all the available space. And that's how floating point values appear. When the numbers after the decimal are high, it seems to get imprecise and make weird spacings. Changing the box-border property doesn't change the result. I made a codepen showing the problem, make sure to use a browser supporting sub-pixel rendering. As you zoom in you can see a space between the border and the pseudo-element.

* {
  box-sizing: border-box;
}

div {
  position: relative;
  
  width: 100.98px;
  height: 100px;
  
  margin-left: 2px;
  
  background-color: aqua;
  border-radius: 10px;
  border: solid 1px #000;
}

div:after {
  position: absolute;
  content:'';
  
  width: 15px;
  height: 100%;
  
  right: 0;
  
  background-color: black;
}
<div>

frontend styling css
1 Answers

Turns out that rounding the width and height doesn't solve the problem at all, it's not about the float values. After some experimenting, I found a sort of trick. If you somehow manage to throw in a right: -1px or a left: -1px it will no longer get weirdly spaced out (right: 0 nor 1 does work). I tested it with a resizable element. Now just move it back with transform: translateX(-1px) and there it is. I hope this works in most situations. I will have to experiment more on that.

user_190703750
Related