How can I prevent the scrollbar overlaying content in IE10?

After googling a bit I stumbled across a discussion where a comment left by "Blue Ink" states:

Inspecting the pages, I managed to reproduce it by using:

@-ms-viewport { width: device-width; }

which causes the scrollbars to become transparent. Makes sense, since the content now takes up the whole screen.

In this scenario, adding:

overflow-y: auto;

makes the scrollbars auto-hide

And in bootstraps responsive-utilities.less file, line 21 you can find the following CSS code

// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@-ms-viewport {
  width: device-width;
}

This snippet is what's causing the behavior. I recommend reading the links listed in the commented code above. (They were added after I initially posted this answer.)


SOLUTION: Two steps - detect if IE10, then use CSS:

do this on init:

if (/msie\s10\.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE10');
} else if (/rv:11.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE11');
}

// --OR--

$('body').addClass(
  /msie\s10\.0/gi.test(navigator.appVersion) ? 'IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? 'IE11' :
  ''  // Neither
);

// --OR (vanilla JS [best])--

document.body.className +=
  /msie\s10\.0/gi.test(navigator.appVersion) ? ' IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? ' IE11' :
  '';  // Neither

Add this CSS:

body.IE10, body.IE11 {
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}

Why it works:

  • The overflow-y:scroll permanently turns on the <body> tag vertical scrollbar.
  • The -ms-overflow-style:scrollbar turns off the auto-hiding behavior, thus pushing the content over and giving us the scrollbar layout behavior we're all used to.

Updated for users asking about IE11. - Reference https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)


As xec mentioned in his answer, this behavior is caused by the @-ms-viewport setting.

The good news is that you do not have to remove this setting to get the scrollbars back (in our case we rely on the @-ms-viewport setting for responsive web design).

You can use the -ms-overflow-style to define the overflow behavoir, as mentioned in this article:

http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx

Set the style to scrollbar to get the scrollbars back:

body {
    -ms-overflow-style: scrollbar;
}

scrollbar

Indicates the element displays a classic scrollbar-type control when its content overflows. Unlike -ms-autohiding-scrollbar, scrollbars on elements with the -ms-overflow-style property set to scrollbar always appear on the screen and do not fade out when the element is inactive. Scrollbars do not overlay content, and therefore take up extra layout space along the edges of the element where they appear.

Tags:

Html

Css

Scrollbar

Internet Explorer 10

Internet Explorer 11

Recent Posts