IE6: forgotten background-image

Internally, having layout means that an element is responsible for drawing its own content.

(MSDN).

Layout ancestor with a dotted semi-transparent background-image.

Parent without layout, with greyscale background-image.

child <p>, inline-style set background-image: none;hover

  1. <div class="ancestor"> ...
  2. <div class="parent"> ...
  3. <p style="background-image: none"> ...
  4. </p>
  5. </div>
  6. </div>
  1. .ancestor { padding:1em; background: url(transparent.gif); zoom:1; } /* has Layout = true */
  2. .parent { padding:1em; background: url(gray.png); /* hasLayout = false */
  3. .parent p { padding:1em; color:#ff7f00;}

Description

When the background-image is explicitly set to <none>, IE forgets to redraw parts of the parent's background when the page is scrolled or text is selected. Reloading the page, an a:hover-transition with a background change, further scrolling or window resizing, selecting the whole container may or may not bring the background-image back.

Workarounds

Discussion

This dimensional bug shows the fragile rendering concept for elements which do not have "layout": someone else is responsible. It's not a layering problem, since the drawn semi-transparent background of the layout ancestor would let the missing background show if the stacking was changed like in other IE bugs, but no. The redraw of the element's background is partly forgotten.

The redraw of the elements does not reflect the nesting of the elements. The redraw reflects the dependencies to a layout ancestor. A descendant may induce the redraw of the layout ancestor, but this will not necessarily inform other lonely descendants.

created: May 21, 2005 Ingo Chao