Bug 18065 - Problem with calculation of elements with percentage-width
Summary: Problem with calculation of elements with percentage-width
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.5
: P2 Normal
Assignee: Nobody
URL: http://www.brunildo.org/test/percwidt...
Keywords:
Depends on:
Blocks:
 
Reported: 2008-03-25 06:54 PDT by Sindre Aarsaether
Modified: 2023-03-23 17:18 PDT (History)
3 users (show)

See Also:


Attachments
Duplicate (45 bytes, text/plain)
2013-07-19 18:57 PDT, hexalys
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Sindre Aarsaether 2008-03-25 06:54:19 PDT
I discovered this problem because I it's a nasty bug in Opera. When testing out I found an inconsistency in webkit to. Check the following example:

<div style="width: 1000px; background: #CCC">
  <div style="background: #00f; width: 509px;">&nbsp;</div>
  <div style="background: #00f; width: 50.9%;">&nbsp;</div>
</div>

I believe that the second inner div should also display as 509px wide.

The link attached also shows the bug. Link is not mine, but made to illustrate opera-problem, so let's hope it stays up for you to see.
Comment 1 Sindre Aarsaether 2008-03-25 06:58:27 PDT
I forgot to mention that webkit renders the second div as 508px wide.
50.9% of 1000px = 509px, but webkit manages to round (that whole number?) down to 508px.
Comment 2 Dave Hyatt 2008-05-01 13:20:58 PDT
Should probably add the 'within 0.01' check from the css back end to the length front end when doing percents.
Comment 3 hexalys 2013-07-19 18:50:55 PDT
(In reply to comment #2)
> Should probably add the 'within 0.01' check from the css back end to the length front end when doing percents.

I can confirm this, and have observed this discrepancy in width calculation in Safari, and previously Presto, for every percentage based framework grids I see. Including my own preliminary model at: http://www.hexanet.com/test/

In Safari 5,5 .1, and 6 on this grid, both the inline-block and block rows do not fill the 100% of the given container, while they do correctly in Chrome, Blink and IE. It get worse when you resize the viewport.

My question would be why does Safari round up to the second decimal and not Chrome? As you seem to suggest...
Comment 4 hexalys 2013-07-19 18:57:39 PDT
Created attachment 207167 [details]
Duplicate
Comment 5 Ahmad Saleem 2023-03-23 17:07:10 PDT
I manage to get the test using Wayback Archive and 2008 copy:

Link - http://web.archive.org/web/20080516092110/http://www.brunildo.org/test/percwidth2.pl

It seems to render same in WebKit ToT, Chrome Canary 113 and Firefox Nightly 113.

Do we have to track it or if someone can confirm, whether we have this issue or not?
Comment 6 zalan 2023-03-23 17:18:45 PDT
<div style="width: 1000px; background: #CCC">
  <div style="background: #00f; width: 509px;">&nbsp;</div>
  <div style="background: #00f; width: 50.9%;">&nbsp;</div>
</div>

works fine now.