1

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?

René Sackers
  • 2,395
  • 4
  • 24
  • 43
  • I fixed it like this for now: https://jsfiddle.net/48e39nrt/2/ (fixElementTop) But surely there's a better way? – René Sackers Jun 28 '15 at 11:11
  • 1
    it is certain to be the IE11 border-radius bug. [this SO thread](http://stackoverflow.com/questions/31003376/ie-11-12-border-radius-1px-bug/31003516#comment50057100_31003516) cites the official MS fix from msdn expert IECustomizer MVP, which is, to reflect blame back onto the dev/customer. Alternatively, [*this* SO thread](http://stackoverflow.com/questions/20051783/ie-11-border-radius-weirdness-did-not-occur-in-ie-9-and-ie-10) resorts to strategically altering a pixel measurement by a tiny tiny fraction, which magically solves the background bleed-thru bug. – user4749485 Jun 28 '15 at 14:47
  • you could sign-in to [MS-Connect](https://connect.microsoft.com/IE/feedback/details/1463734/border-radius-causes-line-of-bleed-through-of-background-color-from-containing-element) and thank Jonathan Sampson MSFT personally for a fine solution. – user4749485 Jul 02 '15 at 19:34
  • Fine solution? Horrible hack with unforeseen consequences :S It also doesn't work on scaling devices like my Surface Pro 3 – René Sackers Jul 04 '15 at 06:18
  • https://jsfiddle.net/48e39nrt/3/ - does this work for you? – user4749485 Jul 05 '15 at 06:05
  • using that wrapper workaround, the red still bleeds thru during transition, and then disappears when the transition finishes. wth, it's like the gauge div shifts, or some goofed up anti-aliasing thing is happening then. I'm not happy with this, but [here's a workaround](https://googledrive.com/host/0B8BLd2qPPV7XZGpDSER4TXR0cEk/ReneSackers-gauge.html) that solves that. humph. – user4749485 Jul 06 '15 at 11:25
  • Very infuriating :( thank you for trying to help, I'll check out your additions soon. – René Sackers Jul 07 '15 at 14:27
  • I just modified it. I wasn't happy with the 60+1px kludge for the transition. Now instead, I duplicated the inner circle div (60px) inside the red circle div. That works. If you like it, I'll take a bow. – user4749485 Jul 07 '15 at 20:48
  • @user4749485 Thank you for your help man, this is getting absolutely rediculous >.> – René Sackers Jul 08 '15 at 11:17
  • 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](https://googledrive.com/host/0B8BLd2qPPV7XZGpDSER4TXR0cEk/ReneSackers-gauge-IEbugavoid.html) (the needle is still separate). It's simpler markup than your original way too. – user4749485 Jul 08 '15 at 12:29

2 Answers2

3

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.

user4749485
  • 1,028
  • 7
  • 10
  • Ok, this is genious man. Thank you so much! Please do note, it was not originally my markup, only slightly modified: http://codepen.io/kylephillips/pen/KwpvgP – René Sackers Jul 08 '15 at 12:58
  • Darn. it still had a tiny bit of grey bleed-thru under the center disk, on the right, when the needle is at zero. So I put back the border-radius wrapper fix. It's marked "inspin2". – user4749485 Jul 08 '15 at 21:37
  • Man, you spent way too much time on this :D Let's hope they manage to fix this in Edge. I'll try to submit it as feedback through the Windows 10 feedback app. – René Sackers Jul 09 '15 at 06:30
0

I would recommend trying to set the line-height to the same as the font-size of the element, and make sure that both of these are integers and in pixels. Also try using pt instead of using px for font sizes to see if it helps.

Mathias Lykkegaard Lorenzen
  • 15,031
  • 23
  • 100
  • 187
  • Tried that, but no matter what you do, if the element's top happens to be on an off-number of pixels, it causes this artifact. – René Sackers Jun 28 '15 at 10:51