IE Escaping Floats and Pee-ka-boo

This article is in draft form and is very unfinished.

The Peekaboo Bug is one of the strangest CSS browser bugs a web developer may encounter. A lot is known about it and what conditions are needed for it to occur but one thing that is largely unknown is that content in a Peekaboo container must be a set distance from the top of the viewpoint. Peekaboo activity occurs in rendering bands that are 150 pixels in height. This page is an exploration into the understanding of what these rendering bands mean and how they relate to how the Peekaboo Bug works.

Some aspects of this page which will help you explore the bug:

• Please observed on the right of the viewpoint a ruler with a point at every 150 pixels down from the top of the viewpoint.
• Hovering over the blue floated elements will caused the container to gain hasLayout.
• Some test have the order of each element, ie. [1], [2] and etc.

Escaping Floats

The following two examples demonstrate that when a containing block becomes narrower, this will cause floats one by one to drop below the first line of floats. When this happens it is understood that the first line of floats escape their container and which is known as the IE Escaping Floats Bug.

Test for example 1a and 1b: Narrow the viewpoint until the later float drops before the earlier float. Observe how the container is now only containing the later float.

Example 1a:

Example 1b:

Example 2:

Test for example 2 and 3: Notice that when no float drop has occurred all is well and sweet. Please narrow the viewpoint until the later float drops before the earlier float. Observe in example 2 how the container still contains both floats but the last of the other elements with a transparent dark pink background have dropped.

Example 3:

Example 3 is slightly better but is still in-consisted with the rendering of other browsers.

The Pee-ka-bo connection

The next few examples show the enigma of the Pee-ka-boo bug. The magic ingredient always is a clearing element but with IE7 we need to give it a bit of a push. Please narrow the viewpoint until the "very long text with no whitespace" drops below the two floats. In these examples please note that the later float is clearing the earlier float. Once this happens, scroll the page up and down over examples 4a and 4b. And observe rendering bands that correspond with the ruler on the side of the page. Finished, OK, now hover the floats and notice the background disappear. Also note that underneath and rendering band the transparent images is shown twice. This will only happen with alpha transparencies. If there is not enough bugs already try hovering the "very long text with no whitespace" links and observe the phantom background. Oh yeah, the right side of the container is unstable. My preferred tool for rubbing is a Notepad sized 100 pixels by 100 pixels.

Example 4a:

Example 4a:

Example 4b:

I guess your wondering how this relates to the Peekaboo Bug as seen in IE 6. Please take a look at the screenshot below of this page in IE 7 and the Peekaboo Bug as seen in IE 6 on Position Is Everything side by side. Note the rendering bands in both browsers.

Please take a look at the screenshot below of this page in IE 7 and the Escaping Float Bug as seen in IE 7 on Position Is Everything side by side. Note the rendering bands.

Example 5:

This container has no clearing div. Observe how IE is kind enougt to leave a space between the two floats ready for any escaping floats. This width of the space always equals the width of the border.

Example 6:

This test only works when the red clearing div is narrower than the float above it. When this occurs a mysterious space appears above the drop link. Reset it by hovering over a "Reset" link and drop it again by hovering over the "Drop" link.

Conclusion

Mmmmmm... What can I say... Maybe the IE Escaping Float could never have been fixed in IE 7 because it was the side effect of IE layout engine Trident using rendering bands to paint a page. The ill effects of this painting method are the IE Escaping Float and Peekaboo bugs.

Relating bugs on this site.

• IE Rendering Bands
• IE Peekaboo Type Bug
• Float with clear - IE Float model
• IE/Opera Floats with block elements not aligning
• IE7 Italic, Float and Background bug. This bug shows how parts of alpha transparencies can be layered two or more times.

This article was created on the 13th of February, 2008 and last updated on the 15th of February, 2008

Author:

Alan Gresley