border size as 0.667 when set the border size as 1px

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Posts: 1
Joined: August 21st, 2017, 6:41 am

Post Posted August 21st, 2017, 6:47 am

In FireFox browser alone ,i get the border size as 0.6667 when i set the border width as 1px to the div or input element or any HTML element. Please find the below screenshot.

I have given the border in css inline style and also via separate class but i get the same result. i have not provided any box model to the element.

If i given the border size 2px then its working fine. i get problem on providing odd number.

if i give 1px => 0.6667
if i give 3px => 2.6667

Due to above problem, my calculation get breaks in css level. So can you please provide solution to resolve this issue?

Whether its browser issue? or else provide any work around solution on this?



User avatar
Posts: 123088
Joined: July 31st, 2005, 9:17 pm
Location: Where the Waters Meet, Wisconsin

Post Posted August 21st, 2017, 6:54 am

Moving to Web Development


User avatar
Posts: 11381
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted October 10th, 2017, 4:51 pm

This is related to how Firefox handles scaling. Let's say you have either:

* Windows "Text Size" 125% + Firefox zoom 120%
* Windows "Text Size" 150% + Firefox zoom 100%

In both cases, Firefox computes

window.devicePixelRatio = 1.5 device pixels per CSS pixel

Firefox then adjusts your border-width from 1px to 0.6667 CSS pixels so that when rendered, you get a 1px border in device pixels (i.e., your border does not get enlarged by zoom).

With the 3px border, it's a bit different. Firefox switches from drawing a 3-device-pixel border to a 4-device-pixel border at a higher zoom level, and there appears to be a step in between.

Not sure this helps, but maybe you can use this information to conceive a workaround.

Return to Web Development / Standards Evangelism

Who is online

Users browsing this forum: No registered users and 1 guest