Bug in Firefox 11 about overflow:visible and clearfix?

[Anonymous]

Hello CSS experts!

I have a question about a potential bug in Firefox 11 about overflow:visible and clearfix. I’m not sure if it’s a bug anyway, so could you confirm please.

Testcase: http://jsfiddle.net/bsfu4/

The 1st row is ok, the 2nd one isn’t, but every browser renders it incorrectly, the 3rd 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, I guess, but Webkit seems to be ok.

So I would like to know if the behaviour of Firefox is buggy in the 3th row of my testcase.

Thanks. :)

Code:

    























Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





Something after doubleColumn



Something after overflowTest











Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





Something after doubleColumn



Something after overflowTest













Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.





Something after doubleColumn





Something after overflowTest

[SgtLegend]

In your .overflowTest class you have a set height which is going to break your elements regardless of the browser your viewing the page in, remove that and everything should work fine.

[Anonymous]

Hello SgtLegend, thanks for replying. And sorry for the delay, I was busy.

Height value is a “must have” value. The test is just for testing, the real app is in the images that I joined. 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.

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.

So I think there is a bug, what do you think?

[Author]

Posts