New issue
Advanced search Search tips
Starred by 3 users

Issue metadata

Status: Archived
Owner: ----
Closed: Aug 2015
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

Text not flowing correctly around floated elements that clear floats to opposite side

Reported by mhfa...@gmail.com, Sep 29 2011 Back to list

Issue description

Chrome Version       : 14.0.835.186
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
URLs (if applicable) : http://jsfiddle.net/VaBCd/
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
     Safari 4: FAIL
  Firefox 6.x: OK
       IE 7/8: OK

What steps will reproduce the problem?

1. View this page in Chrome (or any webkit browser): http://jsfiddle.net/VaBCd/ and observe the way text is painting over the 2nd floated element.

2. More generally: View any web page that has 2 floats: the first with {float: left}, then second with {float:right; clear:left}, and several paragraphs following in markup.  

3. View the same markup/CSS  in any non-webkit browser to understand the appropriate text-flow.


What is the expected result?

The lines of text should break and flow onto subsequent lines such that they do not paint over either floated element. As they do in non-webkit browsers.

What happens instead?

In webkit browsers the text fails to break at the right place with respect to the item that has cleared previous floats in the opposite direction, and partially paints over the 2nd floated element. This appears to be the case with elements that are floated one way and clear elements floated in the opposite direction.

Please provide any additional information below. Attach a screenshot if
possible.

Boris Smus suggested I post this bug in response to my StackOverflow post about it:
http://stackoverflow.com/questions/7596399/text-not-flowing-correctly-around-floated-elements-in-chrome


UserAgentString: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.186 Safari/535.1



 

Comment 1 by gba...@gmail.com, Oct 4 2011

I also came across this problem, but with only stacked float:left elements, so I think the problem relates to any stacked floats and not necessarily alternating left and right.
E.g. http://jsfiddle.net/JwXke/28/

Comment 2 by Deleted ...@, Dec 7 2011

This bug is showing up in the Mac version, too. I'm running: 14.0.835.202
I also came across this bug with stacked left floats.
Project Member

Comment 4 by bugdroid1@chromium.org, Mar 10 2013

Labels: -Area-Undefined
Status: Archived
Archiving unconfirmed issues, which have not been modified (commented on, updated, etc...) in over 2 years.

Sign in to add a comment