745196 - Overflow visible+clearfix bug

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[u439718]

Attachment: overflowBug.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko) Version/5.1.4 Safari/534.54.16

Steps to reproduce:

I've found a bug in regards to using overflow:visible and clearfix inside that area. By standards, an element with overflow hidden or visible should not change it's dimensions, however, if I put a clearfixed div inside an overflow:visible element, firefox expands the parent's dimensions. Because it's hard to write a step-by-step for reproducing, I made a test case. The first row is ok, the second isn't, but every browser renders it incorrectly, the third is like the second, I just put the doubleColumn inside another div to have one element between the overflowed and the clearfixed div. Firefox renders it incorrectly but webkit is ok.

A real life usage would be a page wich has animations in the form of resizing the container based on the new content's height, while the old content fades out and the new fades in. The container would have some padding, but also overflow:hidden, while the content of it would have overflow:visible thus while the container is shrinking/expanding, the user would see the old/new content to the boundaries of the container. Something like this:

http://www.imageserve.info/img_store/2012/03/30/9/9a120870b5fa1da97d5f6710a01a2aef.jpg
http://www.imageserve.info/img_store/2012/03/30/a/ab6e42de4d544438d5e037244beef515.jpg

So in short, the viewContainer has overflow:visible, but the page has overflow:hidden. This is all great and works correctly, EXCEPT when the content of the viewContainer has a clearfixed part. Because the page does not resize itself, it is managed by the browser based upon the viewContainer's height, if the viewContainer does not make itself smaller, the page won't resize, resulting a jumpy animation when the content changes.

I can make this work if I force the height for the page as well, but because I found this bug, I thought I send it in.

Comment 1

[u439718]

The test is just for testing, the real app is in the images that I attached. The basics of what I would like to archive, is to have a container div (the big with the back button), called page. In this container I have a div called viewContainer. The page has paddings so it keeps the viewContainer away from the borders. My script changes the viewContainer's content if the user navigates. Changing the content will trigger the resizing of the viewContainer, it will resize itself, while making a fade-out, fade-in animation for its content. But here is the tricky part. The viewContainer has overflow:visible, because I want the content to be shown outside of that container, but the page has overflow:hidden, to hide the viewContainer's overflowed content, when it reaches the boundaries of the page.