Blurry background with border-radius on not pixel perfect top offset, in IE

Question

I have a page that sizes fonts dynamically depending on the width of the document. This results in heights that are not pixel perfect, but the browsers round them up.

In Internet Explorer there's a problem.

Normally, a background image starts from the edge of its element, the same pixel as the edge after it's top offset is rounded to pixels, but when border-radius is applied, the background starts from where the edge of the element would be if the top offset would not have been rounded, so the image may be blurry.

HTML

<div class="FIRST"></div>
<div class="SECOND"></div>

JS

document.body.onresize = function () {
    document.body.style.fontSize = document.body.clientWidth / 100 + 'em';
}

CSS

.FIRST {
    width: 200px;
    height: 1em;
    background-color: #000;
}

.SECOND {
    width: 200px;
    height: 21px;
    margin-top: 10px;
    background-image: url('data:image/gif;base64,R0lGODlhAQACAIAAAP////8AACH5BAAAAAAALAAAAAABAAIAAAICDAoAOw==');
    border-radius: 10px; /* if this is removed the background works as expected */
}

http://jsfiddle.net/u8Bu8

How do I make it not blur the background?

I'd like a CSS solution using the same HTML.

That base64 GIF is just 1px wide and 2px high, top pixel red and bottom white.

Screenshot

Both sides from IE, magnified by two.

The left side is what is expected, but depending on the width of the window sometimes you get what you see on the right side.

Answer 1

I am not sure I recreate your blurring situation. Here is a side by side with IE & Chrome. I tried to get them to zoom in the same, but they are a little off from each other. But honestly IE looks better than Chrome.

http://chrislovestuff.blob.core.windows.net/img/css-bkg-border-radius.png