spacer

Trident Rendering Bands

What is demonstrated on this page would have been noticed often by web developers. IE seems to re-paint the canvas in stages. What is being seen are rendering bands which are 150 pixels in height and the first band begins at the top of the viewpoint. By using a bug in IE7 when using small alpha transparencies images for a tiled background, these rendering bands become very pronounced. This demonstration uses a background image which is 2 pixels by 2 pixels. Listed below are few test that can be performed.

  1. Open up Notepad and resize the window to the size of the Notepad in the above image. Typing in "IE7" is optional for the test to succeed.... Now move the Notepad across this page and full browser window in continuous circles. Wow..., reminds me of when you solve a game of windows solitaire.
  2. Try highlighting any of the text appearing on this page and notice the slight time delay.
  3. Resize the width of the viewpoint and notice how the transparent background is re-rendered in increments.
  4. Using the vertical scroll bar, scroll up and down the page and notice how the floated image and blocks of text is re-rendered in increments.
  5. Refresh the page and notice how the content is there but the transparent background is re-rendered "again" in incremeants. Offline testing shows something different. The transparent background is painted first in a continuous downwards motion and when finished, bang, in snaps the content. This can be seen online when browsing back to this page from the next page.
  6. Performing any of these above test in IE7 will push the average CPU usage to 100 percent. My computer has a 1.66 gigabytes CPU and 504 megabytes of RAM. I should also mention that I use Windows XP.

The solution really defines logic. Please proceed to the next page for the solution.

Relating bugs on this site.

CSS Class - Internet Explorer bugs

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.