Closed
Bug 1427391
Opened 7 years ago
Closed 7 years ago
Layout CSS border size problem
Categories
(DevTools :: Inspector: Rules, defect)
Tracking
(Not tracked)
RESOLVED
DUPLICATE
of bug 477157
People
(Reporter: dieg0card0s0, Unassigned)
Details
Attachments
(19 files)
|
77.04 KB,
image/png
|
Details | |
|
158.50 KB,
image/png
|
Details | |
|
49.39 KB,
image/png
|
Details | |
|
59.10 KB,
image/png
|
Details | |
|
87.52 KB,
image/png
|
Details | |
|
102.69 KB,
image/png
|
Details | |
|
95.23 KB,
image/png
|
Details | |
|
95.58 KB,
image/png
|
Details | |
|
102.93 KB,
image/png
|
Details | |
|
97.10 KB,
image/png
|
Details | |
|
97.97 KB,
image/png
|
Details | |
|
109.71 KB,
image/png
|
Details | |
|
139.13 KB,
image/png
|
Details | |
|
141.93 KB,
image/png
|
Details | |
|
155.69 KB,
image/png
|
Details | |
|
102.80 KB,
image/png
|
Details | |
|
11.62 KB,
image/png
|
Details | |
|
7.15 KB,
image/png
|
Details | |
|
38.11 KB,
image/png
|
Details |
1427391print.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36 Steps to reproduce: 1. Create a page with this html: <html> <head></head> <body> <div style="border:1px solid #ccc;height:10px;width:10px"> </div> </body> </html> 2. Open with Firefox 57.0.3 3. Inspect rendered div Actual results: Check the Layout tab. She shows border 0.8 instead of 1px. And div element total size is 11.6×11.6px. Expected results: Border 1px and element total size 12x12px.
Work for me in Fx57.0.3 & Fx58b13 on Win10.
Component: Untriaged → Developer Tools: CSS Rules Inspector
|
Reporter | |
Comment 2•7 years ago
|
||
|
|
Reporter | |
Comment 3•7 years ago
|
||
|
|
Reporter | |
Comment 4•7 years ago
|
||
Please, take a look at printscreens. May be related to language pack? I have tested in others computers and the same happen.
Work fine for me with https://ftp.mozilla.org/pub/firefox/releases/57.0.3/win32/gl/ and clean profile.
|
|
Reporter | |
Comment 6•7 years ago
|
||
The same occurs with gl version. But works fine for me in 800x600px resolution gl and pt-BR, I will install the 64bit version and test more resolutions and post here printscreens. Thanks,
|
|
Reporter | |
Comment 7•7 years ago
|
||
|
|
Reporter | |
Comment 8•7 years ago
|
||
|
|
Reporter | |
Comment 9•7 years ago
|
||
|
|
Reporter | |
Comment 10•7 years ago
|
||
|
|
Reporter | |
Comment 11•7 years ago
|
||
|
|
Reporter | |
Comment 12•7 years ago
|
||
|
|
Reporter | |
Comment 13•7 years ago
|
||
|
|
Reporter | |
Comment 14•7 years ago
|
||
|
|
Reporter | |
Comment 15•7 years ago
|
||
|
|
Reporter | |
Comment 16•7 years ago
|
||
|
|
Reporter | |
Comment 17•7 years ago
|
||
|
|
Reporter | |
Comment 18•7 years ago
|
||
|
|
Reporter | |
Comment 19•7 years ago
|
||
Apparently only happens on screens with resolutions > 1680x1050px. YF, what's res you're using?
|
|
Reporter | |
Comment 20•7 years ago
|
||
testing on 58.0.13b
|
|
Reporter | |
Comment 21•7 years ago
|
||
testing on 58.0.13b
|
||
Comment 22•7 years ago
|
||
(In reply to diegocardoso93 from comment #19) > Apparently only happens on screens with resolutions > 1680x1050px. YF, > what's res you're using? 1366x768.
|
||
Comment 23•7 years ago
|
||
This issue is most probably related to the difference between CSS pixels and physical pixels and therefore depends on the monitor you test this on. The layout tab shows computed values. If you execute this in the browser console, you should get the same result: getComputedStyle(theDiv).borderBottomWidth For example, on my screen, I get 0.6666667px both when I execute this line of Js and in the layout tab. However, the Rules tab shows "authored" CSS instead, so there you should see 1px because that's what you authored. The Layout tab however shows computed values, so whatever 1px translated into. The Computed tab also shows those values. So I think it's a matter of consistency, and I don't think we should fix anything here. Does that make sense? Can you confirm that you do get the same value when executing the getComputedStyle thing?
Flags: needinfo?(dieg0card0s0)
|
|
Reporter | |
Comment 24•7 years ago
|
||
Hello Patrick,
I performed the test you indicated and resulted in 0.8px.
I do not agree with your argument that what I see is 1px, because when I add this div to other containers, relative to them the elements are arranged incorrectly. There must be some rounding error.
Take a look at another example visually notable (I'll put the pictures in two resolutions below):
<html>
<head>
<style>
.container {width:250px}
.square {border:1px solid #ccc;height:8px;width:8px;float:left}
</style>
</head>
<body>
<div class="container">
<div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div>
<div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div>
<div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div>
<div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div>
<div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div>
<div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div>
<div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div>
<div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div>
<div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div>
<div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div>
</div>
</body>
</html>Flags: needinfo?(dieg0card0s0)
|
|
Reporter | |
Comment 25•7 years ago
|
||
|
|
Reporter | |
Comment 26•7 years ago
|
||
|
|
Reporter | |
Comment 27•7 years ago
|
||
Apparently occurs to me because of this active video option. But should not maintain proportion along with the zoom applied?
|
|
||
Comment 28•7 years ago
|
||
Oh, I see what you are saying. So, in this case, it's not a devtools bug. The box-model diagram just shows the computed value, and that's what the computed value is. Maybe it's a Gecko bug? But I don't know enough here to know for sure. I'm willing to bet this has already been discussed and settled in the past, but for the sake of clarity, let me rephrase the problem described here: comment 24 has code for the following test case: - a container <div> that is defined to be 250px wide - containing many floated children <divs>s - each of these elements is 8px wide + 1px left border + 1px right border = 10px - so, exactly 25 of them are supposed to fit on one line in the container <div> - however, depending on the browser zoom level, that is not the case. On my macbook, for instance, at a 133% zoom level, 26 of them fit on one line. At 90%, 27 of them fit on one line. Sometimes the 1px CSS wide border does compute to exactly 1px, and other times, depending on the zoom level, it computes to 0.9px, 0.83333px, 0.76666px, or 0.55px. Which explains why sometimes more than 25 of them fit on the same line. Is this a bug? Shouldn't a CSS width of 10px always be exactly 10 CSS pixels? Daniel, what do you think?
Flags: needinfo?(dholbert)
|
||
Comment 29•7 years ago
|
||
Yeah - this is intended behavior (though it can be a bit surprising). We snap border-widths to be exact multiples of device pixels, as noted in bug 477157 comment 7. As I observed in bug 477157 comment 15, apparently Safari does some version of the same thing (though Chrome/Edge do not).
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Flags: needinfo?(dholbert)
Resolution: --- → DUPLICATE
|
|
||
Comment 30•7 years ago
|
||
Note: from an authoring perspective, the best way to work around this is to use "box-sizing: border-box", and include the borders in the sizes that you're using for elements. To achieve the use-case that pbro described in comment 28, you'd want to replace "width: 8px" with "width: 10px; box-sizing: border-box" on those child elements. Then, regardless of how many CSS pixels we actually use for the border, the border-box will be 10px wide (and the content box will have a width of 10px minus whatever we used for the borders).
|
||
Updated•6 years ago
|
Product: Firefox → DevTools
You need to log in
before you can comment on or make changes to this bug.
Description
•