Archive for the 'CSS' Category

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

HTML5 logo in HTML5/CSS3

Thursday, January 27th, 2011

W3C have a new logo:

HTML5 logo

Eric Meyer wasn’t late to create an HTML5/CSS3 version:

http://meyerweb.com/eric/html-xhtml/html5logo/
(logo will be displayed very well inside Opera, Firefox, Safari, Chrome…)

Also interesting to take a look at this HTML5 logo generator, made by Daniel, with the <canvas> html element:

http://people.opera.com/danield/html5/html5logo/
(for best design/functionality experience, open in Opera 11.)

:-)

Target only IE8, IE7 and IE6 in the CSS code

Friday, November 5th, 2010

It’s not a very good idea to “hack” the CSS code in such a way so that certain rules will be seen by specific browsers only — usually, one or more than one version of Internet Explorer (IE Conditional Comments are a much better option, in most of the cases).

But sometimes this is the easiest (or the only) way to deal with the situation — let’s suppose, for example, that you don’t have access to the HTML but to the CSS files only. In this case, the following 4 lines of code might be useful:


body {
color: red; /* all browsers will see this */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}

As you can see, it’s easy to write rules that will be “seen” only by IE8, IE7 or IE6, or a combination of these three IE versions. And let’s hope IE9 will need no hacks! ;)

(via #)


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

0.497 / 28 / 17.25