Width of the div differs even though the settings are the same for all divs

Codepen link to my code

Can someone please explain why the thickness/width of the div differs in the browser even though the settings are the same for all divs.

The diff is about 0.5 - 1 px. If it is not immediately obvious then zoom the page (ctrl +)

Is there a solution to get the same width on all ?

I don’t see any difference. What browser? Did you try different ones?

1 Like

https://i.ibb.co/16QHH7Z/1.png

There you have an image on it

There is no difference in the size of those lines. If you take a screenshot and put it in your paint package and then increase the zoom from the paint package settings you will see that the lines are the same size.

It’s only when you use browser zoom that you get rounding errors and some half pixels get rounded up and some get rounded down. That’s because the browser zoom is not just enlarging what you see but re-renders the whole page element by element and some elements get rounded up and some rounded down depending on how good the browser’s zoom algorithm is (some browsers are better than others). Some browsers keep a check of all the sub-pixels and in order for the three elements to have exactly the same total width then one of them will have to be 1px larger at that zoom. There is no real thing as half a pixel but browsers do calculate them although they can’t draw them.

Browser zoom will never be an exact copy of the default layout at a larger or smaller size because it is a re-render of the code and thus there will be rounding errors on 1px lines and similar. I tend to just use text zoom if I want to read a layout as I don’t like everything getting larger. It’s only the text I want to see larger.

So in answer to your question there is little you can or need to do about browser zoom and something you will have to learn to live with :slight_smile:

In order to prove my point about sub pixel rendering then set a zoom size of default (100%) and change your width to width:1.5px;

In Chrome Mac this shows the middle line at 1px and the outer lines at 2px with no zoom at all.

Screenshot 2021-12-26 at 11.11.20

There’s an old article here about sub pixel rendering and explains why things are not as easy as you may think. Browsers are much better these days because when I started IE6 could be 10px out if you had ten divs across.

3 Likes

You also may find that you get better rounding algorithms if you did something like this.

width: .6px;

However that would be very awkward to maintain and I’d only use it for special cases and of course there will be browser differences.

It’s strange to me that if there is three divs with the exact same dimensions, that the browser don’t do the exact same thing for all three when zooming. It just feels stupid :slight_smile:

If you can do it one way for one, then you can do it the same for the rest. And an indicator that you should do the same is probably that they all have the same dimensions/px

You misunderstood the key point of my post (and you need to read the link I posted again) :wink:

If your three divs are zoomed by a percentage then those three divs take up a total width when zoomed.

For example say that the total width of all three when zoomed is 100px. Theres no such thing as half a pixel so how does the browser make those three divs add up to 100px? Does it make all 3 only 33px each and so the total width is 99px and thus a 1px gap against any other elements on the page that are sized to that 100px?

Or does it make the three divs 34px and now the total width is 102px. That’s 2px out now and won’t line up with whatever else is supposed to be on the page.

That’s the way browser use to handle it and t broke all layouts because 102px won’t fit into a 100px container and 99px leaves a 1px gap in a 100px container. The only logical solution is to maintain the overall width by whatever means it has available which means that some pixels get rounded up and some get rounded down so that the overall width is maintained and the layout doesn’t break.

There is no physically no other solution that meets all criteria. :slight_smile:

2 Likes

But shouldn’t the bowser normally antialiasing the scaled picture?

Evidently browsers do not anti-alias vertical and horizontal borders. I expect that’s because it’s processor intensive.

Interestingly, browsers do anti-alias rounded corners on borders on 100% zoom and they redo the anti-aliasing of corners when you view at other values of zoom.

Lines on images are anti-aliased when zoomed (Firefox, Chrome & Edge at least).

1 Like

If they did, each line probably still won’t be pixel-by-pixel identical. If mathematically the numbers of pixels and the factor of magnification do not produce round figures, they simply can’t.
You shouldn’t see truly rounded pixels until 200% magnification when everything is doubled.

2 Likes

This example feels like another thing compared to my scenario. Your examples requires that all my divs have a fractional part. Three divs with the same width (without fractional) can’t become a total of 100, and therefore if rounding is necessary in my scenario shouldn’t all my divs be able to get the same value?

In my example there are 3 divs and each of them has a width of 1px. If 50% is added they all should be increased to 1.5px, but you say there is no half pixels so they all should be rounded to either 1px or 2px, all the same.

Then what happens to your 20px margins that you specified to be exactly the same?
Something has got to give.

1 Like

If one of the options has to create irregularities, then I would say that the margin is the obvious choice. Because a difference in the divs will stand out more clearly

I don’t think the browser is able to second guess which property any individual would prioritise in any given scenario. In another case, someone may consider the equal spacing of the margin to be critical. But how would a browser know that?
Though find it difficult to imagine a scenario where this even matters.

2 Likes

But how would a browser know that?

It can not, but still it has to. And it doesn’t make the best general decision/prioritization here, according to me. Visible backgrounds/borders should be the obvious first choice when the algorithm does its thing. 1px diff on 20px margin * 3 is not noticeable as much as 1 px diff on a 1px wide visible div * 3.

Though find it difficult to imagine a scenario where this even matters

I don’t

Well actually the browser does seem to sort of do that and it tries to allocate the space in the width of the element where it would be least noticeable. The problem with your example is that you have used the background to make a 1px border rather than using an actual border. I believe if you change your code to the following then most browsers will keep the borders at 1px because the extra space is hidden in the width.

div {
  height: 100px;
  width: 0px;
  border-right:1px solid blue;
  margin-right: 20px;
  display: inline-block;
}

Screenshot 2021-12-27 at 12.59.47

That appears to work much better cross browser.

(You can prove this by adding background red to the above rule and you will see that a 1px red line appears.)

OFF-TOPIC: I suppose you already know that your 20px right margin will not create a 20px gap between inline-block elements (at any zoom)?

2 Likes