Bug 22089 - Setting overflow on element adjacent to right float makes the element become way smaller
Summary: Setting overflow on element adjacent to right float makes the element become ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 525.x (Safari 3.1)
Hardware: Mac (Intel) OS X 10.5
: P2 Major
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2008-11-05 16:08 PST by Tim Molendijk
Modified: 2012-10-02 11:28 PDT (History)
4 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Tim Molendijk 2008-11-05 16:08:24 PST
Just check the testpage at the supplied URL and the issue will be very clear.
Comment 1 Tim Molendijk 2008-11-05 16:09:40 PST
Correction: the testpage is supplied as an attachment, not an URL.
Comment 2 Tim Molendijk 2008-11-05 16:10:49 PST
Created attachment 24923 [details]
ignore
Comment 3 Tim Molendijk 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>
Comment 4 Tim Molendijk 2008-11-05 16:14:47 PST
Created attachment 24924 [details]
testpage
Comment 5 Tim Molendijk 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.
Comment 6 Tim Molendijk 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.
Comment 7 Paranoid Android 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.
Comment 8 Paranoid Android 2009-07-19 03:29:39 PDT
Same as bug 19123.
Comment 9 Robert Hogan 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.