-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Scrollbar overlaps content on desktop IE #18543
Comments
do you have a reduced test case (in jsfiddle or similar)? IE11 on mobile or desktop/laptop? |
@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. |
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:
You'll need to fix these errors and post a revised example before we can proceed further. (Please note that this is a fully automated comment.) |
@usefulBee Try JS Bin then. It has no such containers in its output view (e.g. http://output.jsbin.com/vujito ). |
@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. |
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... |
(Edited your bin to add the two recommended |
@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. |
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
to see http://stackoverflow.com/questions/17045132/scrollbar-overlay-in-ie10-how-do-you-stop-that |
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. |
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. |
System: IE11 on Windows 8.1 Pro and Windows7, using a desktop and a laptop. |
Could you post a demonstration? |
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 |
Yeah, looks that way. |
Pinged some Edge folks in case they have anything to add: https://twitter.com/cvrebert/status/677242861679693824 |
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. |
Just so you don't think we're not looking into this, I sent an email to the person that knows the most about |
Just stopping quickly to confirm that body { -ms-overflow-style: scrollbar; } does solve the problem. |
Fixed by #18775. |
@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 |
Add Wall of Browser Bugs entry for #18543
@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 |
Based on Bootstrap 4 fix, see: twbs/bootstrap#18543 https://github.com/twbs/bootstrap/pull/18775/files
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.
The text was updated successfully, but these errors were encountered: