"transform: translateX(-50%)" with "position: absolute" and "left: 50%" results in scrollbar in Internet Explorer

Question

I want to position a main container in the middle of the viewport.

The container is absolutely positioned, because I want it to fill up the whole vertical space by using position: absolute;top: 0;bottom: 0 (I know that I could achieve a similar effect by using height:100% on html, body, main, but as soon as the content of main exceeds the full height, the main container won't stretch at these exact 100%, which is not what I want).

So to position the absolutely positioned main container in the middle of the viewport, I rely on transform: translateX(-50%), which works painlessly - except in Internet Explorer, which adds an unwanted horizontal scrollbar!

Take a look at this pen:

http://codepen.io/jmuheim/pen/wCzcr

Is there any way to prevent the horizontal scrollbar? overflow-y: none doesn't seem to work.

Answer 1

I faced the same issue some days ago. It appears that it's a bug and the easier way to fix it, it's to position your element from the right instead of the left.

To use your example, the result will be :

main {
  position: absolute;
  top: 0;
  right: 50%;
  bottom: 0;
  width: 50%;
  background-color: red;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
}

You can try it live there : https://jsfiddle.net/julienvanderkluft/3udza0te/