IE11 draws small line between positioned elements

Question

I constructed a thought bubble with HTML and CSS and found an issue solely on IE11 - every other browser (down to IE9) works great.

The idea is simple: Have a container that contains text and give it a background-color and round corners. Then put another element into it and make it look like an arrow. Position the arrow so that it sits right next to the container.

The problem: Somehow, even though the arrow sits perfectly adjusted, there is a very small line between arrow and container. And this line is less then 1px in height. If I move the arrow up a notch then it sits inside the container which cannot be accepted due to the fact that arrow and container must have transparency.

Here is the jsfiddle showing the problem: http://jsfiddle.net/hurrtz/t2RhR/3/

HTML really is simple.

<div id="bubble">
    <div class="arrow"></div>
</div>

CSS is equally simple and boils down to this (some pseudo code ahead):

#bubble {
    (some dimension giving)
    background-color: rgba(0,0,0,0.5); //black, semitransparent
    position: relative;
}

#bubble .arrow {
    position: absolute;
    bottom: 0 - height of arrow:
    background-color: rgba(0,0,0,0.5); //black, semitransparent
}

By the way: The problem increases, decreases or seizes to exist the more I let IE11 zoom in or if the browser window's height is changed.

Here's what it looks like with the gap in IE11:

A screenshot of this picture, zoomed at 500% shows this:

Answer 1

It's because the way the border is calculated. Screen is a finite grid, so when you decide that the center of the arc is at coordinates e.g. "10 x, 10 y" it could mean different things:

• the center of the arc is in the middle of the 10th pixel?
• the center of the arc is at the begginnig of the 10th pixel?
• the center of the arc is at the end of the 10th pixel?

So, when it draws the arc with radius 10px it could go half pixel farther (or closer) from the point you expected (and will yield "half pixel" sizes, a 2px gray line where you wanted 1px black, a circle that is not really round or some other sad surprise).

This kind of different behaviour is common among the major browsers (e.g. see this: Border-radius: 50% not producing perfect circles in Chrome ) I think it shouldn't be considered a bug, those are just implementation decisions that unluckily for us differ from a browser to another.

The most common solutions is to play with the border width (0.5px,1px,2px) and radius (even/odd sizes) or even positioning with decimals (bottom: -19.5px?). Can't say wich combination will yield best results for this case since I can't reproduce it in Windows 7 + IE11.

Answer 2

border-bottom: 1px transparent solid ; margin-bottom: -1px ; /* grey line fix */

all well and good but there is no real answer to the problem here. after a search i found this. and it worked on the IE and safari grey line issue on a simple white box i use.

Answer 3

Based on @miguel-svq answer (thanks!!!), which was very helpful, I have simplified it with the following:

#bubble{
       /* Set the border color to match your surrounding background. 
          It will take away the grey line in IE11 */
       border: solid 0.5px #f0f0f0; 
    }