I have a UI that mimics a retro mac OS. But one thing I’m noticing is that lines that should be a crisp 1px in height appear blurry on my Macbook retina screen. But fine on my iPhone XS and non-retina monitor.
These lines are created using a 1px box-shadow which I thought might be the issue. But I’ve tried using an SVG instead and still the issue persists.
You can see an example of different approaches I’ve tried here:
This happens in Chrome, Safari and Firefox.
Anyone have any idea what is causing this issue? I guess it’s some sort of pixel-rounding issue? As depending on screen position, which line is blurred changes - but I didn’t think that’d be the case with an SVG image as well?
1px lines often tend to blur on different pixel densities. There was an article here with a few tips.
I often found that using a fraction of a pixel (1.1px) could help keep things stable but doesn’t always work.
In your svg example it might be better to draw the lines at 2px height and then reduce it with css back to the original 1px using background size. It’s the same approach used for images where they are made twice the size and then reduced back to the correct size in css.
Unfortunately I am away from home on holiday at the moment and don’t have the tools available to test.
Yeah the gradient one doesn’t work well enough at all, just tracking what I tried.
It’s strange as it only ever seems to be one of the lines. I think I might need to try one of the more involved JS solutions.
I’ve updated the CodePen as I tried an SVG x2 the size but get the same results. Also tried a PNG but same. The 1.1px didn’t look like it made any visible changes but I’ll keep digging!
I meant to also say that for clean stops of color you need to end and start on the same pixel. Don’t stop on 1px and then start the next color on 2px. Start the next color on the same pixel you finished the previous color with.
Let us know how you get on as it’s a common problem. If I was back home I could test a few things out so can only make suggestions from here
Doh! I actually forgot how I did that before putting in in CodePen haha. Sorted that now and just used background-size: 1px 3px; so it just has the 3 colours. Sadly the same issue but still good to track!
