Search code examples
htmlcssinternet-explorersubpixel

IE 11 sub-pixel rendering overflow

On Internet Explorer 11, I have an issue with sub-pixel rendering causing an overflow of an element.

sub-pixel rendering error IE, Chrome, FireFox

As you can see, on IE11, the red part of the gauge seems to be "peeking" out of the bottom, while it seems fine on the other 2 major browsers Chrome and FireFox.

If we zoom in on the issue in IE, we can see what's happening:

sub-pixel rendering error IE, zoomed

It seems to be rendering a sub-pixel over the mask.
The header "Temperature" renders as an element with the height of 34.5px, causing all elements underneath it to be shifted .5px down, causing this issue.

This is how the gauge is built up: JSFiddle

<div id="temperature-gauge" class="gauge-control" data-percentage="0">
    <div class="header">Temperature</div>
    <div class="gauge-elements">
        <div class="gauge">
            <div class="inner"></div>
            <div class="spinner temp"></div>
        </div>
        <div class="pointer"></div>
        <div class="pointer-knob"></div>
    </div>
    <div class="indicator">60&deg; C</div>
</div>

Is there any way to solve this, other than giving the header a static height, to ensure all elements underneath are on a full-pixel?

Solution

  • Here's the best approach I think. We can avoid both IE bugs by combining the gauge's 3 colors into a single div, then transforming the whole thing. demo (the needle is still separate). It's simpler markup than your original way too.