Bug 22089

Summary: Setting overflow on element adjacent to right float makes the element become way smaller
Product: WebKit Reporter: Tim Molendijk <tim>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Major CC: bonbons67, paranoid.android.dev, robert, zapperlott
Priority: P2    
Version: 525.x (Safari 3.1)   
Hardware: Mac (Intel)   
OS: OS X 10.5   
Attachments:
Description Flags
ignore
none
testpage none

Tim Molendijk
Reported 2008-11-05 16:08:24 PST
Just check the testpage at the supplied URL and the issue will be very clear.
Attachments
ignore (4.87 KB, text/html)
2008-11-05 16:10 PST, Tim Molendijk 		no flags
Details
testpage (4.89 KB, text/html)
2008-11-05 16:14 PST, Tim Molendijk 		no flags
Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Tim Molendijk
Comment 1 2008-11-05 16:09:40 PST
Correction: the testpage is supplied as an attachment, not an URL.
Tim Molendijk
Comment 2 2008-11-05 16:10:49 PST
Created attachment 24923 [details] ignore
Tim Molendijk
Comment 3 2008-11-05 16:13:12 PST
Comment on attachment 24923 [details] ignore ><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ><HTML lang="nl-NL" xml:lang="nl-NL"><HEAD> > > > > > <META content="text/html; charset=UTF-8" http-equiv="Content-Type"/> > > <TITLE>Screen adaptation test</TITLE> > > <STYLE type="text/css"> > html { > overflow-y: hidden; > } > > body, > div, > ol, > ul, > li, > a, > span, > p, > img, > table, > tbody, > tr, > th, > td, > form, > h1, > h2, > h3, > h4, > h5, > h6 { > margin: 0; > padding: 0; > border-style: none; > color: inherit; > text-decoration: inherit; > border-width: 0; > } > > </STYLE> > <SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"/> > <SCRIPT type="text/javascript"> > //&lt;![CDATA[ > jQuery(function($) { > $('.set-overflow').click(function() { > $('#main').css('overflow-y', $(this).text()); > }); > }); > //]]&gt; > </SCRIPT> > </HEAD><BODY style="min-width: 50em;"> > <DIV style="float: right; width: 15em; height: 300px; background-color: green;" id="side"> > Right-floating, fixed-height div.<BR/> > <BR/> > Set 'overflow-y' to the list to the left: > <BUTTON class="set-overflow">auto</BUTTON> > <BUTTON class="set-overflow">hidden</BUTTON> > <BUTTON class="set-overflow">scroll</BUTTON> > <BUTTON class="set-overflow">visible</BUTTON> > </DIV> > <DIV style="height: 300px; margin-right: 15em; background-color: yellow; overflow-y: visible;" id="main"> > Non-floating, fixed-height div.<BR/> > <BR/> >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum >viverra feugiat magna. Aliquam eget erat at metus elementum sagittis. >Fusce ultricies, enim id laoreet tempus, urna ipsum auctor ipsum, vitae >convallis augue lectus eu purus. Phasellus cursus lacus quis orci. >Maecenas gravida, mauris nec pretium porttitor, purus orci dignissim >felis, et vestibulum nulla ipsum laoreet lectus. Sed quam tellus, >bibendum vitae, lobortis ut, tempus vel, nunc. Nam vitae nisl. >Suspendisse lacinia leo. Phasellus tristique elementum odio. >Pellentesque habitant morbi tristique senectus et netus et malesuada >fames ac turpis egestas. Ut a metus. Nulla eget dui et purus aliquet >feugiat. Ut aliquam dignissim dolor. Aliquam consequat, magna eu >tristique tincidunt, orci lacus pulvinar sapien, vitae accumsan arcu >neque a orci. Quisque sem nisi, molestie et, pellentesque in, faucibus >scelerisque, ligula. Fusce et libero in leo posuere viverra. Fusce non >erat et ante interdum aliquet. Nam aliquam. Aliquam luctus nisl nec >tellus. Nunc venenatis risus nec neque. In eu dui vulputate nulla >ullamcorper varius. Quisque urna. Sed est odio, imperdiet id, imperdiet >ut, gravida in, magna. Sed auctor vestibulum velit. Cum sociis natoque >penatibus et magnis dis parturient montes, nascetur ridiculus mus. In >eget dui. Nam rutrum mi in nisi. Vivamus ac sem facilisis ipsum >fringilla tincidunt. Phasellus tempor suscipit odio. Vestibulum congue >hendrerit urna. Donec suscipit enim sit amet lacus. Suspendisse >potenti. Ut elit justo, laoreet at, pharetra in, tempor quis, odio. Ut >tempor, augue vitae lacinia ultrices, lectus enim lacinia dolor, at >ultrices diam odio at justo. Vivamus varius, tellus ac fringilla >dapibus, augue sem dictum sapien, sit amet porttitor est eros in ante. >Integer ultrices lorem et massa. Lorem ipsum dolor sit amet, >consectetuer adipiscing elit. Phasellus lobortis lacus sit amet pede. >Nunc condimentum mi ut magna. Nam eu arcu luctus massa varius accumsan. >Pellentesque habitant morbi tristique senectus et netus et malesuada >fames ac turpis egestas. Cras convallis risus. Phasellus condimentum >augue consequat urna. Integer turpis orci, faucibus eu, egestas sit >amet, rhoncus sit amet, mi. Aenean vel magna. Pellentesque non ipsum. >Vivamus vitae lectus. Etiam fermentum volutpat odio. Phasellus >pellentesque massa quis dui. Mauris sagittis sem a elit. Proin a orci >id leo faucibus rhoncus. Mauris ullamcorper, quam et bibendum >sollicitudin, enim nulla dignissim justo, in accumsan ante nisl aliquet >augue. Vivamus semper lacus ut sapien. Aenean lobortis pulvinar sem. >Aenean vel elit. Phasellus tempus ipsum. Donec mattis, enim in laoreet >mattis, felis massa dictum urna, sit amet pharetra odio tellus eget >purus. Nunc turpis. Sed tortor justo, varius non, elementum et, >molestie auctor, augue. Fusce id lacus ut quam suscipit sollicitudin. >Fusce lectus lorem, eleifend et, laoreet eleifend, ultrices quis, urna. >Nullam cursus, nisl vel vulputate gravida, ipsum nibh fringilla arcu, a >vehicula elit tortor pretium nisl. Pellentesque in ligula. Quisque >hendrerit tellus eu augue. Cras eget arcu vel neque feugiat pulvinar. >Phasellus quam turpis, euismod vel, venenatis ac, eleifend malesuada, >ligula. Sed nec lacus. Cras ligula lacus, consectetuer eu, convallis >id, imperdiet in, metus. Fusce elementum aliquam eros. Suspendisse non >ligula. In hac habitasse platea dictumst. </DIV> > </BODY></HTML>
Tim Molendijk
Comment 4 2008-11-05 16:14:47 PST
Created attachment 24924 [details] testpage
Tim Molendijk
Comment 5 2008-11-06 03:21:01 PST
I just found out that this bug only occurs when the non-floating element has a right-margin.
Tim Molendijk
Comment 6 2008-11-06 03:30:00 PST
Crap, I just now realize the resize is due to the margin itself! Then the logical subsequent question is if this is the desired behavior. I think not, since the right float should float over the right-margin of the non-floating element, resulting in no empty space between non-float and float. This is also how Gecko behaves.
Paranoid Android
Comment 7 2009-07-19 03:08:45 PDT
Same behavior in Chrome 3.0.194.0 and Android browser. Unless I'm missing something glaringly obvious about the overflow property, this is definitely a bug.
Paranoid Android
Comment 8 2009-07-19 03:29:39 PDT
Same as bug 19123.
Robert Hogan
Comment 9 2012-10-02 11:28:43 PDT
I'm not seeing anything obviously amiss with this test on Chromium 20.0.1132.47 and unfortunately the report doesn't state what the problem is/was. So I'm going to say it's fixed, whatever it was. Please let me know if I'm wrong.
Note You need to log in before you can comment on or make changes to this bug.