IE9 background shifting bug

On Tuesday, I mentioned that the brand-new IE9 browser is out; yesterday and today, I am already fighting with the first IE9-bug I encountered… :-(

The story in short: I installed IE9 mainly because I was curious to see how good is the support for some of the new CSS3 properties — rounded corners, box-shadows, text-shadow, gradients, transitions, and so on.

So, as soon as IE9 was officially released, I installed it, then restarted my Win7 machine, and lo and behold! in one of the first designs I tested in it, I found a new bug (new in the sense: a bug that I never encountered in IE8 or IE7): a strange one-pixel shift in the background image of a page, when (un)certain conditions are met!

Here’s a test page:

http://www.optimiced.com/lab/2011/ie9-background-bug/

Test conditions:

Internet Explorer 9 (you need Windows Vista or Windows 7; Windows XP is not supported).
— The browser window must be maximized.
— I tested with the following screen resolutions: 1680×1050, 1440×900. (Not sure if bug will happen if your screen is larger or smaller.)
— Open the test page, wait for it to load.
— With the mouse, scroll down to the bottom of the page, then up to the beginning. You have a 50%/50% chance to see a one-pixel shift in some part of the background of the page, in the upper part! (At least, I see such 1px shift…)
— If you refresh the page, bug is gone. If you scroll again down-up once or twice, bug is back again!
— (Update 1) If the Menu Bar is not open in IE9, the bug is not triggered. If the Menu Bar is open, it is triggered! (Just in case: screenshot of the toolbars that are open when the bug can be reproduced: Menu bar, Status bar.)
— (Update 2) If you have AERO disabled, the bug won’t show up (for example, if you use Windows Classic or Windows 7 Basic theme). If AERO is enabled (Windows 7 theme, with AERO = “ON”), the bug is there! (Big thanks to Adam Kiss, who made some tests.)
— (Update 3) “Show tabs on a separate row” should not be enabled (and it’s not, by default). If you select “shows tabs on a separate row”, bug will disappear too (?).
— If you put more Lorem Ipsum text in the main column, bug is gone.
— If you reduce (or increase?) the height of the main column (#content) in which the Lorem Ipsum text is located, the bug no longer appears. Currently, the div#content has a min-height of 500px.
— If you minimize the window of IE9 and then back again to maximized state, the bug disappears (page is re-rendered after a minimize > restore-back-to-maximized operation).
— The 1px shift occurs only in the upper part of the background image, and quite randomly.

Now, the background image is applied to the body element:


body {
background: #8F8F8F url(../img/body-test.png) 0 0 repeat-x;
}

…and there is nothing special in the code.

The left part of this background-image is the original image, the right part is for testing purposes — the horizontal lines help see if there are any shifts in the background image position. Otherwise, that was the original.

After many tries I discovered that the format of the background image does not matter (PNG, JPG, GIF…) as well as its size.

You can scroll with a mouse or the up-down arrows on the keyboard.

Of course, it’s possible that something in my setup (Win7/IE9) is wrong and so any kind of third-party confirmation for the existence (or non-existense) of this bug would be appreciated! (Btw, I never saw such a bug in IE7/8, Firefox, Opera, Safari, Chrome. Only in IE9.)

Here’s how the test page is supposed to look:

And here how it looks after a couple of scrollings down/up:

Also please note that after scrolling down/up, and then mouse-overing the elements in the navigation, another visual strangeness happens:

So, in “ideal conditions”, the page should look like this, but after some scrolling, here’s how it looks like (or even like this).

* * *

Otherwise, testing IE9 is fun — for now I see that CSS3 transitions and text-shadows are not supported. Border-radius and box-shadow are supported, though, which is nice. I’ll be testing more.

Any help is appreciated! Did I discover a bug? If yes, what triggers it?…

6 comments |



Comments to “IE9 background shifting bug”:

  1. Michel Says:
    1

    I was able to replicate this bug on another Windows 7 machine with 1920×1080 screen and AERO enabled. Strangely enough, when scrolling with the mouse, the bug did not show up. When using the arrow up/down keys on the keyboard, I was able to reproduce it 100% of the time.

    Adam also confirmed that he can replicate the IE9 bug when AERO is enabled…

    Now question is, what IE9 does not like in the HTML (or CSS) that triggers this bug?…

  2. Martyn Says:
    2

    I had this problem when adding a background image to the body tag. I add “overflow:scroll”
    Not sure if it will work with your website but it is worth a try.

    Martyn

  3. Michel Says:
    3

    Hi, Martyn,

    I have overflow-y: scroll applied to the body tag in my test page, yet, IE9 clearly did exhibit the bug in question…

  4. Barrett Says:
    4

    I actually had a problem with the background showing up. FF Chrome and even IE7 it showed up but in IE8 and 9 there was no background showing up. The background was prob larger than the page itself with a fixed position on it. Sure enough add the overflow-y: scroll; and wala, there it was…

    Thanks for the tip,
    Barrett

  5. Michel Says:
    5

    @Barrett:

    Glad if my short post about IE9 helped you a bit! :)

  6. elllis champion Says:
    6

    I have tried EVERYWHERE to get an answer.
    When I open internet explorer 8 my home page is http://www.att.net-when it loads it keeps shifting back and forth then stops with the search bar half way off the screen to the right. I have to move to page to clock to enter a search.Is there a way I can fix this. you can email me if you like. thanks, howard

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Your e-mаil address will never be showed.


[ optimiced.com is the virtual home of Web & graphic designer Michel Bozgounov | powered by WP & hosted by DreamHost | also available in български ]

0.552 / 30 / 17.25