CODEWITHSUNDEEP
css
jairhumberto
jairhumberto

Reputation: 614

Get wrong border width on firefox

When I set border-width to 1px I am having 0.8, when I set 5px, I get 4.8, but that just in firefox.

On Google Chrome is just fine.

edit: my firefox version is 55.0.3

Do you know what is going on? Thank you.

orange box with h1:

orange box with h1

computed values:

computed

css rules:

css

Upvotes: 4

Views: 2147

Answers (2)

myf
myf

Reputation: 11273

(To address some uncertainity in discussion, posting half-baked semi-answer.)

Your display has DPI factor 125%.

"CSS Pixel" represent virtual measure and maps to physical pixels accordingly. Browsers do their best to render what you expect, and in case of borders you most probably expect sharp edges and no blurry antialiasing, but for example for 100 × 1% relatively sized child blocks you'd expect them to fill the 100% wide parent, regardless how clunky those fractions would be. To fulfill such expectations browsers result to lots of rounding and adjustments "behind the scenes", so no wonder values could go a bit unpredictable in some cases.

Have you measured dimensions of the border in your screenshot? It is not 5 physical pixels, nor 4.8 (what should be blurry), but is is actually 6 physical pixels wide.

To be honest, I'd guess that the computedStyle and values in developer tools should really tell the "nice lies" of CSS pixels and the produced values does not makes much sense to me either; I hope someone will authoritatively tell whether it is a bug or not.

Some testing:

[].forEach.call(document.querySelectorAll('p'), e => {
  e.innerHTML = ', computed:'
  + getComputedStyle(e)['border-top-width']
  + ', rect.height: '
  + e.getBoundingClientRect().height
})
p {
  border-color: red;
  border-top-style: solid;
  line-height: 20px;
  margin: 10px;
  padding: 0;
}

p::before {
  content: attr(style)
}
<p style="border-width:1px">
<p style="border-width:2px">
<p style="border-width:3px">
<p style="border-width:4px">
<p style="border-width:5px">
<p style="border-width:6px">
<p style="border-width:7px">

Some reading:

https://johnresig.com/blog/sub-pixel-problems-in-css/

https://webplatform.github.io/docs/tutorials/understanding-css-units/#Final-thoughts

Upvotes: 6

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195971

After checking your jsfiddle, which works fine, i suppose you most likely have zoomed out your browser.

Try Ctrl+0 or from the menu go to View->Zoom->Reset

Computed tab screenshot
FF 55.0.3 Console/Computed tab screenshot

Upvotes: 1

Related Questions