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:600p         


        

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.