|Summary:||A combination of float/margin/first-child causes strange behaviour|
|Product:||WebKit||Reporter:||Martijn T. <webkit_bugzilla>|
|Severity:||Normal||CC:||kevin.cs.oh, robert, stijndewitt, webkit_bugzilla|
|Version:||528+ (Nightly build)|
Description Martijn T. 2011-03-30 03:51:52 PDT
Just registered to bring this to your attention. I was unable to find what is causing the problem illustrated in the attachment. It may be me, but seeing that Firefox 4 and IE8 render it as I would expect, I thought that it might be a bug. Searching on the terms that I think are related to the problem didn't give me any similar bugs but I may have used the wrong search terms. In short, I've got two divs: one contains a logo, the other the top menu. The logo div is floating left and the top menu div is floating right. #topmenu contains a UL with 4 LI's. The LI's have a margin-left of 20 pixels to space them apart but using first-child I've removed the 20 pixels margin from the first element. In Gecko/20100101 Firefox/4.0 and in Trident in IE 8.0.7600.16385 64/32-bit this renders and measures as I would expect it to. In the latest Chrome and in Safari (Chrome/10.0.648.204 Safari/534.16) it renders differently. The last LI in de UL wraps, while it has enough room to expand a bit to the left. I have measured all the individual elements contained in #top and #topmenu using Firebug for Chrome and DOM-inspector for Fx. All the elements have the same dimensions in both browsers. The last LI in the UL won't wrap, if I give #topmenu a fixed width that is the auto-size of 390 px + 20 px (mh, margin-left?) for a total of 410 pixels. If I remove the first-child margin-left: 0; then I get another strange response from Chrome and Safari where the wrapping element seems to lose it's left-margin and vertical-aligns with the first element of the UL. All the HTML and CSS involved will be attached for testing.
Comment 1 Martijn T. 2011-03-30 03:53:10 PDT
Created attachment 87497 [details] Screenshot of problem Mh, bugzilla didn't include the attachment. Here is the screenie illustrating the problem.
Comment 2 Martijn T. 2011-03-30 03:54:13 PDT
Created attachment 87498 [details] HTML for this problem HTML attached
Comment 3 Martijn T. 2011-03-30 03:55:24 PDT
Created attachment 87499 [details] CSS for this report Please put this in ./stylesheets/
Comment 4 Martijn T. 2011-03-30 14:24:54 PDT
I noticed that I can't select the right version for Webkit in de dropdown. If I'm not in the right spot for bugreports like this then please show me the way :)
Comment 5 Stijn de Witt 2011-04-13 13:54:14 PDT
Created attachment 89450 [details] Minimal scenario for WebKit Overflowed Float Bug I can confirm this bug. It renders fine in Firefox 4, Internet Explorer 9 and Opera 11, but not in WebKit. I was able to reduce the test scenario a bit further. The resulting page is attached and can also be tested on my personal web space: http://members.chello.nl/~sgm.jansen/WebkitOverflowedFloat/
Comment 6 Stijn de Witt 2012-01-14 06:24:00 PST
It seems this bug is related to https://bugs.webkit.org/show_bug.cgi?id=45274 and https://bugs.webkit.org/show_bug.cgi?id=58806 There is a patch ready for both these bugs but some tests are failing on it.
Comment 7 Stijn de Witt 2013-04-08 12:29:07 PDT
It seems this bug is now fixed. I just checked the demonstration page I made for it and it renders fine now in the latest Chrome (26.0.1410.43 m). So thanks for fixing whatever bug (Bug 58806 ?) was a duplicate of this one! I think it can be closed now. Demonstration page: http://members.chello.nl/~sgm.jansen/WebkitOverflowedFloat/ Thanks for building WebKit!!