How can I prevent the scrollbar overlaying content in IE10?

Question

In IE10, the scrollbar is not always there... and when it appears it comes on as an overlay... It's a cool feature but I would like to turn it off for my specific website as it is a full screen application and my logos and menus are lost behind it.

IE10:

enter image description here

CHROME:

enter image description here

Anyone know a way of always having the scrollbar fixed in position on IE10?

overflow-y:scroll doesn't seem to work! it just puts it permanently over my website.

It may be bootstrap causing the issue but which part I have no idea! see example here: http://twitter.github.io/bootstrap/

My IE10 does not have this behavior, are you running it as a "Metro" app? — xec, Jun 11 '13 at 13:27
No I am not. I am in windows 8, if that makes any difference. It is the same on my laptop too... You may not notice this scrollbar behaviour because other websites like stackoverflow for example have found a way around it... I hope the new picture helps distinguish the difference between what I do and do not want — Jimmyt1988, Jun 11 '13 at 13:28
Setting the width of the page would work.. alas, I was wondering if there is a cross browser way. considering firefox, safari and chrome do not have this behaviour. I could use an IE10 specific doo-raggy I suppose.. just doesn't seem like the most elegant answer. — Jimmyt1988, Jun 11 '13 at 13:33
@JamesT I am on w8 too, but can't find any page that makes IE10 render the scrollbar as an overlay (not even my go-to test page, www.arngren.net) — xec, Jun 11 '13 at 13:38
Ahh hangon then, it might be a bootstrap thing??? hmmmm.... Ill reword the question... lol at your link btw. — Jimmyt1988, Jun 11 '13 at 13:39
Ooh, indeed, the bootstrap page does have the weird-scrollbar-syndrome — xec, Jun 11 '13 at 13:41
@Jimmyt1988 FYI this is the correct answer and should be accepted. https://stackoverflow.com/a/19706857/3540289 — Suresh Karia, Jul 03 '17 at 07:48

stefan.s · Answer 1 · 2016-04-20T07:18:42.527

181

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.

edited Apr 20 '16 at 07:18

answered Oct 31 '13 at 12:42

stefan.s

3,449
2
28
44

9

I added this on the html element, i.e. `html{-ms-overflow-style: scrollbar;}` and it worked for me. Would there be use cases where this was needed elsewhere? – nHaskins Aug 14 '14 at 21:14
7

`body{-ms-overflow-style: scrollbar;}` working fine for me.. Thanks – Manjit Singh Sep 03 '14 at 09:12
15

This should be the answer. The accepted one removes viewport device adaption. – mnsth Feb 24 '15 at 08:12
it adds overflow on the x – Monicka Aug 04 '15 at 15:03
1

@stefan.s this is the correct answer! Should be accepted – Suresh Karia Jul 03 '17 at 07:35
Worked for me on v.3.3.7. Simply setting the `@-ms-viewport` in CSS didn't fix my issue in IE11, but _this_ worked. – Phil Nicholas Dec 07 '17 at 07:08

score 163 · Accepted Answer · edited Nov 21 '19 at 15:46

163

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.)

edited Nov 21 '19 at 15:46

isherwood

46,000
15
100
132

answered Jun 11 '13 at 13:55

xec

15,592
3
40
48

74

You sir are a gentleman and a scholar! I placed @-ms-viewport{ width: auto !important; } into my css file and away the problem went :D – Jimmyt1988 Jun 11 '13 at 14:03
4

great answer, i'd recommend to others that you read the article referenced in bootstrap's comment: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ -- removing that code from bootstrap might break IE10 responsiveness in Windows 8 metro – tmsimont Oct 11 '13 at 15:29
@tmsimont Good point. Also, they seem to have changed the comment in the latest Boostrap source file (updated my answer with the new comments), which now mentions the use of a UA sniffing script to apply this to "*only* the Surface/desktop Windows 8" - check out the issue link https://github.com/twbs/bootstrap/issues/10497 – xec Oct 14 '13 at 08:33
It should be browser problem Not developers problem! When IE not scroll or not mouse over on right side of windows, the scrollbar should not appear. We should have nothing to do to stop this stupid behavior from IE. Dear MS & IE you make problems too much since IE6. You should stop. – vee Apr 25 '14 at 21:26
Where exactly do you place `overflow-y: auto;` ? I'm going to guess, but I think it would be helpful for others looking at this to know. Also, does using the `overflow-y: auto;` trick break Windows 8 metro? – JonathanTech Oct 16 '14 at 16:07
1

I really do like bootstrap but I wish they would separate the media and viewport options in a different file. I was building a responsive website for the first time and I literally had to go and remove a ton of stuff from bootstrap to make my site function the way I wanted it to. – David Dec 18 '14 at 22:51
9

-ms-overflow-style: scrollbar; seems to be the cleaner solution (see second answer). – Manuel Arwed Schmidt Mar 23 '15 at 01:04
This should do the trick, the media query will prevent the scroll for disappearing when screen is larger than 992px. (I assume Windows mobile device need this for hiding the scroll bar. this is why I've made the media query). @-ms-viewport { width: device-width; } @media (min-width: 992px) { @-ms-viewport { width: auto !important; } } Thanks for the hint it's really helpful ! – Cstyves Apr 14 '15 at 14:50

gdibble · Answer 3 · 2018-11-02T19:34:01.690

12

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)

edited Nov 02 '18 at 19:34

answered Mar 08 '14 at 01:11

gdibble

953
9
13

14

why would you not just do body{ -ms-overflow-style: scrollbar; } ? – Scott Romack Jun 12 '14 at 17:25
7

-1 Your code does not work on IE11 and it wont on IE12 when it's released. There's better ways to do IE-specific styles. – Joseph Lennox Aug 05 '14 at 14:24
1

@JosephLennox If you could add an answer to indicate a better way of doing IE-specific styles, I'm sure both gdibble and others who come along to this question would appreciate it. – Conspicuous Compiler Sep 09 '14 at 12:53
2

@ConspicuousCompiler The "-ms-" prefix already adequately makes it IE only. – Joseph Lennox Sep 09 '14 at 14:59
5

This is like @stefan.s’s answer, but with unnecessary bloat. – Ry- Dec 29 '14 at 22:18
`-ms-overflow-style: scrollbar;` is the trick, just add it to the body – dude Nov 21 '15 at 09:27

score 4 · Answer 4 · edited Jun 23 '15 at 13:00

4

Try this

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

edited Jun 23 '15 at 13:00

josliber

41,865
12
88
126

answered Jun 23 '15 at 11:51

user2606817

115
2
4

Primoshenko · Answer 5 · 2018-09-18T12:58:31.783

This issue is also happening with Datatables on Bootstrap 4. Mi solution was:

Checked if the ie browser is opening.
Replaced table-responsive class for table-responsive-ie class.

CSS:

.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}

JS:

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) //If IE
        {
            $('#tableResponsibleID').removeClass('table-responsive');
            $('#tableResponsibleID').addClass('table-responsive-ie');
        }

score -4 · Answer 6 · answered Feb 23 '15 at 22:54

-4

Tried the @-ms-viewport and other suggestions but none worked in my case with IE11 on Windows 7. I had no scroll bars and the other posts here would at most give me a scroll bar that didn't scroll anywhere even though there was plenty of content. Found this article http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ which reduced to . . .

body { overflow-x: visible; }

. . . and did the trick for me.

answered Feb 23 '15 at 22:54

Toadmyster

500
3
10

2

The question is not about missing scrollbars, but about the semi-transparent scrollbars overlay introduced as a side-effect when using bootstrap. You could also try `body { overflow: auto; }` – xec Mar 04 '15 at 15:09

How can I prevent the scrollbar overlaying content in IE10?

6 Answers6

Linked

Related