IE showing horizontal scrollbar after dom element transformed

Question

I've used the following css in various places on my site:

http://jsfiddle.net/uycq29mt/1/

.a {
    position:absolute;
    background:red;
    width:600px;
    height:100px;
    left:50%;
    transform: translate(-50%);
}

When run in internet explorer, you'll notice a horizontal scrollbar that appears to ignore the transform regarding the total width of the page.

Answer 1

There is a simple solution:

http://jsfiddle.net/uycq29mt/2/

.a {
    position:absolute;
    background:red;
    width:600px;
    height:100px;
    right:50%;
    transform: translate(50%);
}

Instead of sending the element left 50% (rightwards) and using a transform to send it left, I do the exact opposite. I never considered it until now but if you position an element to the extreme left, it won't affect the page width or the scrollbar.

Strangely, if you do the vertical equivalent of centering, by using top 50% and translate(0px, -50%) it does not appear to affect the vertical scroll bar.

It appears only Internet Explorer doesn't recalculate horizontal boundaries when transforms are used in this way. Pretty annoying. IE sucks.