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
- trigger hasLayout = true in .parent (via the Holly hack, floating, any dimension etc.)
/* \*/ * html .parent {height: 1%} /* */ - position the element (cave: for floating childs, you have to trigger hasLayout too!)
.parent {position:relative} - apply a border to parent or child
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.