This page demonstrates a strange background painting bug in IE5/Mac. The navigation bar above is an unordered list with list-style:none, with list items displayed as inline items. Inside each list item is a link (a element) that is floated left. The list items are defined to have a red background, while the links above them are defined to have blue backgrounds.

The problem in IE5/Mac is that, if the a elements are floated, the red background on the li elements carries through onto the text areas (but not the padding areas) of following elements, even if they have their own background color defined. Defining the navigation ul element as position:relative additionally results in all the text in the subsequent elements being obscured by the red background. This is clearly a background-repainting bug, much like the negative margin bug in Windows IE6, because it doesn’t apply to elements that are not in the viewport when the page is initially rendered and thus that you have to scroll down to see.

Some dummy text to make this more obvious (and demonstrate that it’s not just paragraph elements affected

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ultricies, metus sed rutrum dignissim, leo dui sollicitudin sapien, sit amet sagittis est metus ut erat. Maecenas sollicitudin. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam libero velit, vestibulum vitae, congue ac, rhoncus eu, enim. Vivamus bibendum feugiat mauris. Ut id velit vitae diam porttitor pharetra. Aliquam vehicula tincidunt turpis. In faucibus pharetra velit. Vivamus magna. Ut nisl nisl, accumsan eget, malesuada id, euismod ac, ligula. Sed nulla. Praesent venenatis dolor non risus. Proin mollis. In ornare purus ut felis. Aliquam felis. Donec pede. Etiam aliquam. Suspendisse ultrices, urna non varius faucibus, turpis turpis pellentesque wisi, vitae dapibus nulla tortor et urna.

Aliquam fermentum, ligula sit amet porttitor lacinia, sapien mauris aliquet pede, in facilisis libero wisi quis enim. Aenean id mauris. Nam urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque euismod feugiat turpis. Pellentesque lacinia. Mauris vel nibh. Nulla quis eros eget velit hendrerit euismod. Aenean nunc nulla, vestibulum sed, lacinia ac, euismod vitae, velit. Maecenas mi. Phasellus vel quam et tellus pretium dignissim. Maecenas wisi pede, vestibulum vitae, faucibus vel, porta adipiscing, diam. Mauris dictum viverra tortor. Donec lacinia. Aenean aliquet molestie libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse posuere pede non ipsum.

Nullam hendrerit neque sed turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla varius posuere risus. Curabitur scelerisque condimentum lorem. Ut vestibulum egestas sem. Suspendisse eget leo. Nunc eu lectus non mauris rhoncus tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla pede. Duis sed lacus et ante ultricies egestas. Duis nunc. Praesent sodales lectus id tellus. Sed pretium volutpat nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu lectus. Aliquam eu ligula. Cras bibendum bibendum magna.

Cras arcu magna, tempus in, iaculis et, convallis vitae, augue. Nunc vestibulum. Praesent adipiscing. Aliquam suscipit. Curabitur a est. Vivamus id wisi eu ligula pharetra suscipit. Phasellus elit. Aliquam erat volutpat. Praesent in nulla. Donec luctus elementum tellus. Mauris in quam.

Quisque accumsan. In nunc. Duis massa libero, dapibus sit amet, ornare ac, tincidunt eget, quam. Nulla adipiscing. Ut a mi eu sem consequat rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed porta, augue nec dictum consequat, tellus ligula vestibulum est, non cursus ipsum wisi sit amet turpis. Phasellus id justo in mauris tempor ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque hendrerit porta nunc. Pellentesque erat. Cras lorem justo, mattis a, blandit at, commodo in, purus. Cras luctus, arcu a euismod eleifend, lorem massa consectetuer eros, ut consequat mi nisl ut wisi. Phasellus nunc. Mauris augue.

This bug was discovered by Philippe Wittenbergh.