{"id":1479,"date":"2011-03-17T23:22:07","date_gmt":"2011-03-17T21:22:07","guid":{"rendered":"https:\/\/www.optimiced.com\/en\/?p=1479"},"modified":"2011-03-18T15:36:20","modified_gmt":"2011-03-18T13:36:20","slug":"ie9-background-shifting-bug","status":"publish","type":"post","link":"https:\/\/www.optimiced.com\/en\/2011\/03\/17\/ie9-background-shifting-bug\/","title":{"rendered":"IE9 background shifting bug"},"content":{"rendered":"

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

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.<\/p>\n

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)<\/em>: a strange one-pixel shift in the background image of a page, when (un)certain conditions are met!<\/p>\n

Here’s a test page:<\/p>\n

https:\/\/www.optimiced.com\/lab\/2011\/ie9-background-bug\/<\/a><\/strong><\/p>\n

Test conditions:<\/p>\n

— Internet Explorer 9<\/a> (you need Windows Vista<\/strong> or Windows 7<\/strong>; Windows XP is not supported).
\n— The browser window must be maximized<\/strong>.
\n— I tested with the following screen resolutions: 1680×1050, 1440×900. (Not sure if bug will happen if your screen is larger or smaller.)
\n— Open the test page<\/a>, wait for it to load.
\n— With the mouse, scroll down to the bottom of the page<\/em>, then up to the beginning<\/em>. 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…)
\n— If you refresh the page, bug is gone. If you scroll again down-up once or twice, bug is back again!
\n— (Update 1) If the Menu Bar<\/strong> is not open in IE9, the bug is not<\/strong> triggered. If the Menu Bar is open, it is triggered! (Just in case: screenshot of the toolbars<\/a> that are open when the bug can be reproduced: Menu bar, Status bar.)
\n— (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<\/a>, who made some tests.)
\n— (Update 3) “Show tabs on a separate row<\/a>” should not be enabled (and it’s not, by default). If you select “shows tabs on a separate row”, bug will disappear too (?).
\n— If you put more Lorem Ipsum<\/em> text in the main column, bug is gone.
\n— If you reduce (or increase?) the height of the main column (#content<\/code>) in which the Lorem Ipsum text is located, the bug no longer appears. Currently, the div#content<\/code> has a min-height<\/code> of 500px.
\n— 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).
\n— The 1px shift occurs only in the upper part of the background image, and quite randomly.<\/p>\n

Now, the background image is applied to the body<\/strong> element:<\/p>\n


\nbody {
\nbackground: #8F8F8F url(..\/img\/body-test.png) 0 0 repeat-x;
\n}
\n<\/code><\/p>\n

…and there is nothing special in the code.<\/p>\n

The left part of this background-image<\/a> 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<\/a>.<\/p>\n

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

You can scroll with a mouse or the up-down arrows on the keyboard.<\/p>\n

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.)<\/p>\n

Here’s how the test page is supposed to look:<\/p>\n

\"\"<\/a><\/p>\n

And here how it looks after a couple of scrollings down\/up:<\/p>\n

\"\"<\/a><\/p>\n

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

\"\"<\/a><\/p>\n

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

* * * <\/p>\n

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.<\/p>\n

Any help is appreciated! Did I discover a bug? If yes, what triggers it?…<\/p>\n","protected":false},"excerpt":{"rendered":"

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,…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,14],"tags":[],"class_list":["post-1479","post","type-post","status-publish","format-standard","hentry","category-browsers","category-css"],"_links":{"self":[{"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/posts\/1479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/comments?post=1479"}],"version-history":[{"count":3,"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/posts\/1479\/revisions"}],"predecessor-version":[{"id":1491,"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/posts\/1479\/revisions\/1491"}],"wp:attachment":[{"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/media?parent=1479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/categories?post=1479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/tags?post=1479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}