Mysterious Horizontal Scrollbars on IE11

2018-11-30 | #css, #solution, #webdev

In the past weeks I discovered the same basic problem in IE11 several times:

Somehow, a website would get a horizontal scrollbar, but only on IE11. The usual test with

* {

outline: 1px solid red;

}

showed no element whatsoever forcing the scrollbar. So what's happening here?

It turns out that the culprits were elements with translations on them. The following had happened: to center an image in a container we positioned the image absolute 50% top and left. After that we used a translate(-50%, -50%) to center the image visually. It now turns out that IE11 actually calculates the layout different than all other browsers in this case, because it calculates with the original layout position before the translation instead of the resulting placement.

This is somewhat strange, but actually not entirely wrong, since translations should only be GPU-buffer operations and not change the layout by definition, but in reality this, of course, is a little bit bullshit, since we also have interactive elements like links, which are translated as well and have to be interactive at the final position and not the origin. So of course the layout is changed somehow and all other browsers at least calculate the cutoff correctly.

So, how do we solve this?

.container-of-transitioned-element {

overflow: hidden;

}

That was easy.

Of course you could also be more radical and set

html, body {

overflow-x: hidden:

max-width: 100%;

}

But that might not always be possible.