Bootstrap: Scrollbar overlaps content on desktop IE

[usefulBee]

This issue is still going on even in IE 11.

The issue comes down to the following bootstrap.css rule:
@-ms-viewport {
width: device-width;
}

The temporary solution is to override the rule in another css file:
@-ms-viewport{
width:auto!important;
}

It would be nice to see this issue taken into consideration in future releases.

Thank you.

[patrickhlauke]

do you have a reduced test case (in jsfiddle or similar)? IE11 on mobile or desktop/laptop?

[usefulBee]

@patrickhlauke, I am afraid it would be difficult to replicate the issue in jsfiddle since jsfiddle has its own containers and therefor the issue does not appear. For example, I edited the following example, so there would be many table columns and rows, but that is not enough to trigger IE scrollbar to show up"

I experienced the issue on IE11 desktop/laptop.

[twbs-lmvtfy]

Hi @usefulBee!

You appear to have posted a live example (http://fiddle.jshell.net/L46FX/1965/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 51, column 25 thru line 52, column 13: Saw < when expecting an attribute name. Probable cause: Missing > immediately before.
• line 51, column 25 thru line 52, column 16: End tag had attributes.
• line 52, column 17 thru column 29: Misplaced non-space characters insided a table.
• line 52, column 17 thru column 29: Cannot recover after last error. Any further errors will be ignored.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[cvrebert]

@usefulBee Try JS Bin then. It has no such containers in its output view (e.g. http://output.jsbin.com/vujito ).
(And also, please fix the HTML as @twbs-lmvtfy pointed out.)

[usefulBee]

@cvrebert , thank you for the alternative. I managed to replicate the issue using jsbin and applying custom css rule of width: device-width; (http://output.jsbin.com/zewaza)

In the attached screenshot, the far right column is overlapped by IE scrolling bar.

Fixed the html issues on jsbin...not sure why those automated messages on github do not automatically disappear just like they automatically appear. As much as this is useful, it is very distracting as well.

[cvrebert]

You appear to be referring to the IE10 Mobile bug (http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#internet-explorer-10-in-windows-phone-8 ), but on desktop somehow...

[cvrebert]

(Edited your bin to add the two recommended <meta> tags.)

[cvrebert]

@usefulBee What version of Windows are you using? On vanilla Windows 10, IE11 has auto-hiding scrollbars, so this isn't really an issue there.

[patrickhlauke]

Unless I'm mistaken, I suspect @usefulBee is actually referring to the fact that the scrollbar in IE is semi-transparent (and not anything to do with scrollbars appearing unnecessarily).

The current behavior is intentional (i guess?), but can be suppressed/changed by adding

-ms-overflow-style: scrollbar;

to body, for instance.

see http://stackoverflow.com/questions/17045132/scrollbar-overlay-in-ie10-how-do-you-stop-that

[patrickhlauke]

[cvrebert]

My understanding of their complaint is that the scrollbars, when visible, overlap the content (as opposed to the alternative browser behavior of making the viewport's right boundary be the left edge of the scrollbar; i.e. making the viewport narrower).

In my testing, Win10 IE11 behaved similar to OS X's default scrollbars, which is to say that they overlap the content while they're visible, but once you stop scrolling, after a small delay, they hide themselves, thus no longer obscuring the content they overlapped with.

My take is: Why care about scrollbars overlapping content when the scrollbars are transient anyway? Nobody is perpetually scrolling; the user will be able to access the obscured content shortly after they finish scrolling.

[patrickhlauke]

Sure, I don't have a particular problem with the current behavior in IE11, and am happy to keep it as is. Just clarifying the slightly vague (to me) problem description. And yes, the semi-transparent scrollbar does disappear/hide itself when not scrolling. It's just that it's not something other browsers in Windows do, so may seem strange to some devs/users.

[usefulBee]

System: IE11 on Windows 8.1 Pro and Windows7, using a desktop and a laptop.
As mentioned in the first post, width:auto!important; solves the issue and will force the far right content to fit probably side by side with the scroll bar. Without this hack, a complete instant visibility of the last element/column is not really the only issue, another example of a problem is that if the last column header contains a filter icon. Even if you managed to click the icon, the filter popup window in this case will be partially hidden....what is worse is that IE ScrollBar won't disappear.

[cvrebert]

another example of a problem is that if the last column header contains a filter icon. Even if you managed to click the icon, the filter popup window in this case will be partially hidden....what is worse is that IE ScrollBar won't disappear.

Could you post a demonstration?

[patrickhlauke]

I can confirm that if there is something clickable right up against the edge of the browser, it's not possible to click it (easily) as at the slightest movement the scrollbar will reappear and swallow the click.

I would, however, be wary of simply replacing width: device-width; with width:auto!important; - the former is there for a specific reason. Perhaps adding -ms-overflow-style: scrollbar; is still the best option (as then the scrollbar will also behave the same way as in other browsers on Windows)

[cvrebert]

Perhaps adding -ms-overflow-style: scrollbar; is still the best option

Yeah, looks that way.
The fact that setting the viewport also affects the scrollbar style in a desktop browser seems like an arguable bug to me.

[cvrebert]

Pinged some Edge folks in case they have anything to add: https://twitter.com/cvrebert/status/677242861679693824

[patrickhlauke]

Edge seems to have the same behavior, but its auto-hiding/showing seems less trigger-happy, allowing for some mouse movement into the edge area before showing it again.

[gregwhitworth]

Just so you don't think we're not looking into this, I sent an email to the person that knows the most about -ms-viewport but it will be a bit due to the holidays. I suggest using the -ms-overflow-style suggestion as that's its intention, but we'll respond back here once we know why the styles are changing due to the width setting within the @viewport

[usefulBee]

Just stopping quickly to confirm that body { -ms-overflow-style: scrollbar; } does solve the problem.
I wonder if there is any possibility that this line would be somehow injected with a future Bootstrap. And hey, before I forget, I really appreciate your commitment everyone and proud of your professionalism!

[cvrebert]

Fixed by #18775.

[cvrebert]

@gregwhitworth Filed a Connect Feedback bug to track this: https://connect.microsoft.com/IE/feedback/details/2256049/edge-ie11-viewport-rule-has-side-effect-of-making-scrollbars-auto-hide

[gregwhitworth]

@cvrebert Thanks, I spoke with the Comp team since this is something they own, they have a bug on it already so don't be surprised if yours gets closed for the older one. They aren't as inclined to fix it yet since most browsers don't support the @viewport yet. I've added the comments regarding this discussion though for the team to take into consideration when triaging. Thanks again for reaching out regarding it.