Getting this post out quickly because I suspect I may be the first to report this bug - me! First! Either that or my Google skils seriously suck.

Anyway, IE8. The browser Microsoft tried to convince us would work the way a browser was supposed to work. Did they really expect us to swallow that?? I should probably admit that it is a bit of a leap forward, even if it's not the cat's pyjamas we were told it would be. Mostly it seems to behave a bit like Firefox 2 and at least, thanks to the backwards magic that is conditional stylesheets, we can target it for its little inconsistencies.

But, alas, just like its predecessors it has moments of total insanity and it was one if these the tester on my current project discovered a few days ago. This afternoon I spent some quality time with IE8 and made the following interesting discovery.

If you zoom a document which contains block level elements with non-repeating background images where the vertical positioning of the background image is anything other than 0 or a multiple of 4px, you are likely to reveal a bug where the first 1px of the image is repeated below it, displaying as a 1px line (for vaguely box-shaped images - I guess circles and irregular shapes might not yield such an obvious result).

Fun, eh? The 4px thing I discovered through lots of trial and error and 'whaa...?' - but it only applies to the 'standard' zoom options and may break under custom zoom levels - I suspect this is because the standard zoom ratios - 50%, 75, 100, 125, 150, 200, 400 - are based around quarters (well up to the 150, I guess). I tried setting different heights on my block and inline-block elements, but always the 4 came through. Mind you, I haven't tested with different heights of background images, so I don't know whether that's a factor too, but this is hopefully a starting point for others who are battling similar things.

I have another issue awaiting me too which I'm certain is related - a repeating background image (a dropshadow) is showing a 1px line to the right of it when the page is viewed at 105%. On closer inspection it too is the 1st pixel-width of the background image - but how to fix it? No idea yet. Let me know if you have a suggestion!

Labels: browsers, bugs, code, website

# posted by minim @ 10:33 PM