Archive for March, 2011

Banjo Pigs in Technicolor

Tuesday, March 29th, 2011

What can be better than a nice drawing of a pig with a banjo? A pig with banjo… in fullcolor!

— this is how I interpreted the colors. And here’s another variant — here’s how Ani interpreted the colors:

How we did it? First, print high-res variant of the illustration, then some water pencils to color it, followed by high-res scan and finally, resize/export in Adobe Fireworks. Done!

Note 1: The color variants of Nixo‘s illustrations are under the same CC license as is the original illustration.)
Note 2: No banjo pigs were harmed during the coloring of these pictures! ;)

IE9 background shifting bug

Thursday, March 17th, 2011

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?…

IE6-IE9: 10 years

Tuesday, March 15th, 2011

10 years is a lot. In the Web, 10 years is quite a lot. IE6 was one of the best browsers when it hit the market in 2000-2001. Then it slowly started to transform itself into a brake for new technologies on the Web. While all other browsers (Mozilla, Mozilla Firefox, Opera, Safari, and now Chrome) were adopting new technologies at a fast pace and improving their rendering of web pages, IE6 remained un-changed.

IE6-7-8-...9!

Microsoft now say that IE6 is history. And that IE9 (that officially was released today and is available for all users of Windows Vista and Windows 7) is much better.

We’ll see! :)


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

0.466 / 22 / 17.5