Last month, I made a blog post detailing how to use CSS arrows as a progress indicator. I really like this and use it whenever I’m asked to create a wizard-like interface.
However, I discovered, after finally updating from IE9 to IE11 that there is a specific IE11 bug that reared its ugly head.
The gist of the bug is that if you have an element with rounded corners against another element, there will be a small line drawn between the elements. In the case of the CSS arrows, it winds up looking like this:
How can this be fixed though? There are some CSS hacks that can detect IE11 and newer and adjust accordingly. In the case of the “small arrow,” it uses “left: -15px” to create the arrow against the block body effect with outline. Oddly, changing this to “left: -14.92px” appears to alleviate the IE11 bug.
By using the pseudo “-ms-fullscreen” and “:root” elements, we detect IE11. Beyond that, it’s just adjusting the left (and right) positioning on the element in front of the anchor body by 1px:
/* IE11 border bug fixes... hooray! */
_:-ms-fullscreen, :root .wizard.small.left-arrow a:before {
left: -14px;
}
_:-ms-fullscreen, :root .wizard.small:not(.left-arrow) a:after {
right: -14px;
}
_:-ms-fullscreen, :root .wizard.left-arrow a:before {
left: -29px;
}
_:-ms-fullscreen, :root .wizard:not(.left-arrow) a:after {
right: -29px;
}
Here’s an updated pen that shows the fix (view in IE11):