0

Why is it like this? enter image description here

Codepen example: https://codepen.io/bofemptiness/pen/PxGePa?page=1&

The problem is more about why same lines are different, not a scale.

css:

.hr{
  width: 100%;
  margin:10px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 65%), rgba(0, 0, 0, 0));
  border: 0;
  height: 1px;
  padding: 0;
  font-size: 16px;
   display: inline-block;
 }

If I make height: 0.8px; with normal PC scale 100% some lines will just disappear..

P.S. Laptops is scaled 125% by default: enter image description here

dmcgrandle
  • 5,934
  • 1
  • 19
  • 38
ZiiMakc
  • 31,187
  • 24
  • 65
  • 105

1 Answers1

1

On my machine (MacBook with Retina display) it looks ok as long as I have set the browser's scaling to 100%. The Retina scaling is 200%. Therefore, the lines will be exactly 2 physical pixels high and exactly fit on them.

When I modify the browser scaling, I get similar results like you. No the lines are 1.8 pixels high (at 90% scaling), 37.8 pixels apart and no longer fit on the grid of the physical pixels.

So what you're seeing is an aliasing effect that's difficult to avoid when you're close to the screens resolution. You'll have to find a different design, e.g. use wider lines and a lighter color.

Codo
  • 75,595
  • 17
  • 168
  • 206
  • but why are they different from each other? They all then should be small or big. – ZiiMakc Nov 11 '18 at 17:52
  • 1
    They're different because for some of the lines, the "logical" pixels are landing squarely on the physical pixels, but on others, they're straddling two rows of physical pixels, and so they get antialiased. You could do a media query for device pixel ratio and adjust the pixel height of your hr's accordingly. – Thomas Peri Nov 11 '18 at 18:28
  • @Thomas Peri can you give example how to do it? – ZiiMakc Nov 11 '18 at 18:40
  • 1
    Unfortunately I don't have a working way of solving your specific problem. And actually, since the scale level can be an arbitrary user-assigned number as opposed to a list of common ratios in known devices, a CSS media query won't be any help. Take a look at the value of `window.devicePixelRatio` in your browser using JavaScript. If its value changes according to the zoom you set, then you can divide by that number to calculate the pixel height you need. However, it probably won't work: https://stackoverflow.com/questions/42569455/detect-os-zoom-in-browser#comment72273374_42569455 – Thomas Peri Nov 11 '18 at 19:31