Bug 50006 – Webkit underflows % widths and shows red on the right side

• Component: CSS
• Status: RESOLVED WORKSFORME

[Jonathan Neal]

Created attachment 74728 [details]
Screenshot of the underflow taken from Chrome 7.0.517.44

I setup a layout with two columns.  The layout has a width of 1001px.  The columns have a width of 50%.

The later column doesn't take up enough space on the right in Chrome7 and Safari5 because of (what appears to be) a 1px underflow.  It appears to be that Chrome is rounding down the value of the % (eg both columns at a width of 500px) which leaves a last float looking a pixel short.

This reminds me of the IE6/7 pixel overflow issue, where IE6/7 was rounding up the value of the % (eg both columns at a width of 501px) which caused the last float to stack.

[Konstantin Shcheglov]

Same as https://bugs.webkit.org/show_bug.cgi?id=5531

[Ahmad Saleem]

Created attachment 461259 [details]
Safari 15.6 matches with Chrome but differs from Firefox

I looked into Wayback archive for the above and changed into following JSFiddle:

Link - https://jsfiddle.net/2h6b1x04/show

As can be seen from attached screenshot, Safari 15.6 matches with Chrome Canary 106 but differs from Firefox Nightly 105. I am not clear now web-spec or whether it is duplicate of any other bug but just wanted to share updated results. Thanks!

[Karl Dubost]

The difference here in between Firefox and Safari/Chrome on the other side is the height of the height of the layout wrapper. 

In Safari/Chrome, it is 0px
In Firefox, it is 210px

The layout difference is created by 
<wbr style="clear: both; display: block; ">

If I replace `wbr` by `div`. The layout is the same in the 3 browsers.
<div style="clear: both; display: block; "> </div>

So it seems to depends on the wbr imple
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-wbr-element


The initial report was about the red space showing on the right side of the column. 
This is not the case anymore in the 3 browsers. 

So This is solved with regards to this specific issue. 

The WBR behavior and the wrapper seems a different beast which is unrelated. :)