Closed
Bug 653686
Opened 13 years ago
Closed 13 years ago
Wrong offsetWidth value on <TD>
Categories
(Core :: DOM: CSS Object Model, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: simonpai, Unassigned)
Details
(Keywords: testcase)
Attachments
(1 file)
|
482 bytes,
text/html
|
Details |
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16
<html>
<head>
<title>offsetWidth rounding issue</title>
</head>
<body>
<table width="501px">
<tr>
<td style="background-color: green" id="td1">TD 1</td>
<td style="background-color: red" id="td2">TD 2</td>
</tr>
</table>
<script>
alert(document.getElementById("td1").offsetWidth + ', ' + document.getElementById("td2").offsetWidth);
</script>
</body>
</html>
In the html page above, offsetWidth values returned by javascript are 248, 248. But the real widths on the screen is 248, 247. Not sure if this is caused by number rounding.
Reproducible: Always
Steps to Reproduce:
1. Load the html file given in description. You will see a dialog printing out the offsetWidth values returned by javascript.
2. Compare to the real width on the screen.
Actual Results:
You will see values 248, 248.
Expected Results:
Should be 248, 247, compared to what's on the screen.
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16 Mozilla/5.0 (Windows NT 6.1; rv:6.0a1) Gecko/20110428 Firefox/6.0a1 Able to reproduce.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Version: 3.6 Branch → unspecified
Before changing status to NEW, please check: * Vesion (is it a Problem in Fx4 (Fx5) too?) * Product, Component (this is Core, Layout, I'd say) * NEW bugs in Core-Layout needs a testcase (attach the code in comment 0 as HTML attachment)
Status: NEW → UNCONFIRMED
Ever confirmed: false
> * Version (is it a Problem in Fx4 (Fx5) too?)
sorry, of course you dis this.Version: unspecified → Trunk
|
||
Comment 4•13 years ago
|
||
WFM, using Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:5.0a2) Gecko/20110429 Firefox/5.0a2
|
|
||
Comment 5•13 years ago
|
||
Also WFM with Firefox 4.0. Alert says "248, 248"
> Also WFM with Firefox 4.0. Alert says "248, 248"
Expected is "247, 248" (what WebKit and Opera show)
Fx and IE alert "248, 248"j.j., Webkit shows 247, 248 because the real widths are 247, 248 on the screen in Chrome/Safari. The real widths on Firefox are 248, 247. (i.e. The second <TD> is shorter.) Their behaviors are different. We should count on Firefox's behavior to determine the expected values, not other browsers' spec. Firefox 4 has the same issue like José Jeria mentioned.
|
||
Updated•13 years ago
|
Component: General → DOM: CSS Object Model
Product: Firefox → Core
QA Contact: general → style-system
|
||
Comment 9•13 years ago
|
||
This is invalid.
The layout widths for those tables are 247.5 pixels each. When they are rendered, the edges are antialiased, so they actually share rendered pixels with the cellspacing and the like. Depending on how you were examining your screen pixels, this may have led you to conclude that they have different widths on screen. Of course if you use a DOM API that rounds widths to integers, then you ask for "247.5" rounded to an integer which is 248. This is a fundamental limitation of the offsetWidth API: it can't actually properly represent layout information unless you round off all your layout calculations to integer pixels (which is what Opera and WebKit do).
If you want to ask for the actual widths of things, use getBoundingClientRect(). Doing this:
alert(document.getElementById("td1").getBoundingClientRect().width + ", " +
document.getElementById("td2").getBoundingClientRect().width)
shows "247.5, 247.5" for me.Status: UNCONFIRMED → RESOLVED
Closed: 13 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•