Re: Issue 101 Resolution

Alan Gresley wrote:
> Bert Bos wrote:

>> That is true even if the changed behavior would be better in some way. 
>> But, in fact, it isn't better. It is much worse. It makes no sense 
>> that the width of the parent influences whether the two floats 
>> overlap. Floats shouldn't overlap in the first place. And if the 
>> parent has such influence, why not the grandparent? It just makes no 
>> sense at all.
> 
> 
> That is why we must look at those 9 rules of 9.5.1.


Here is an interesting example that shows floats overlapping 
completely (like if rule 3 doesn't exist).


<!DOCTYPE html>

<html dir="rtl">

<style type="text/css">

html {background: silver;}
body {background: white;}

#rightparent {
  width: 400px;
  background: orange;
}
#rightfloat {
  float: right;
  width: 450px;
  height: 100px;
  background: green;
}
#leftfloat {
  float: left;
  width: 200px;
  height: 200px;
  background: blue;
}
</style>

<body>

<div id="leftfloat"></div>
<div id="rightparent">text
  <div id="rightfloat"></div>
</div>

</html>

Without a parent, there is normal float dropping as expected. With a 
parent in RTL we can see what seems to be some strange behavior.


<http://css-class.com/test/temp/rule1and3-rtl.htm>


Viewing in Gecko. Narrowing the viewport will cause the floated right 
box (green) to move almost completely over the floated left box 
(blue). This is since the floated left box left outer edge is always 
sitting against the left inner edge of it's containing block which is 
the body. Rule 3 just doesn't seem to happen. I believe that WebKit 
and Opera would do likewise if they supported RTL with floats correctly.

Viewing in Gecko again, you can do two things:

1. Narrow the viewport so the word 'text' can still be seen against 
the orange background. Now refresh and notice that the floated right 
box (green) has repositioned itself below the floated left box (blue). 
This will now stay in this position even if the viewport is widen 
enough to accommodate both floats. Now refresh again and the floated 
right box (green) will jump back up into "normal position."

2. Narrow the viewport so the word 'text' is over the top of the 
floated left box (blue). Now refresh and notice that both the 'text' 
and the floated right box (green) has repositioned themselves below 
the floated left box (blue). These will now stay in this position even 
if the viewport is widen enough to accommodate both floats. The orange 
expanse is within the body.  Now refresh again and the floated right 
box (green) will jump back up into "normal position."


For me, Gecko behavior of floats overlapping in this manner is not 
unusual but the behavior after refresh is unusual. This could happen 
if a viewer narrowed a viewport temporarily and while in the narrowed 
state the document was dynamically refreshed. The user would be 
surprised to see the rendering when widening the viewport and then 
some time later surprised again as the right float rearranges itself 
after another dynamic refresh.



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Friday, 8 October 2010 01:33:57 UTC