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.
https://i.stack.imgur.com/yqkcW.png
https://i.stack.imgur.com/Nc5Sa.png
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?
Thanks,
Gobala
border size as 0.667 when set the border size as 1px
-
- Posts: 1
- Joined: August 21st, 2017, 6:41 am
- Daifne
- Moderator
- Posts: 123071
- Joined: July 31st, 2005, 9:17 pm
- Location: Where the Waters Meet, Wisconsin
Re: border size as 0.667 when set the border size as 1px
Moving to Web Development
- jscher2000
- Posts: 11772
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: border size as 0.667 when set the border size as 1px
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.
* 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.