Skip to content
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

Closed
usefulBee opened this Issue Dec 11, 2015 · 23 comments

Comments

Projects
None yet
5 participants
@usefulBee
Copy link

usefulBee commented Dec 11, 2015

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

This comment has been minimized.

Copy link
Member

patrickhlauke commented Dec 11, 2015

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

@usefulBee

This comment has been minimized.

Copy link
Author

usefulBee commented Dec 11, 2015

@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

This comment has been minimized.

Copy link

twbs-lmvtfy commented Dec 11, 2015

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

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 12, 2015

@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

This comment has been minimized.

Copy link
Author

usefulBee commented Dec 15, 2015

@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.
2015-12-15_1313

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

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 16, 2015

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

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 16, 2015

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

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 16, 2015

@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

This comment has been minimized.

Copy link
Member

patrickhlauke commented Dec 16, 2015

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

This comment has been minimized.

Copy link
Member

patrickhlauke commented Dec 16, 2015

ie11-transparent

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 16, 2015

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

This comment has been minimized.

Copy link
Member

patrickhlauke commented Dec 16, 2015

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

This comment has been minimized.

Copy link
Author

usefulBee commented Dec 16, 2015

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

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 16, 2015

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?

@cvrebert cvrebert changed the title IE Scrollbar Overlapping Content Scrollbar overlaps content on desktop IE Dec 16, 2015

@patrickhlauke

This comment has been minimized.

Copy link
Member

patrickhlauke commented Dec 16, 2015

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

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 16, 2015

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

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 16, 2015

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

@patrickhlauke

This comment has been minimized.

Copy link
Member

patrickhlauke commented Dec 16, 2015

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

This comment has been minimized.

Copy link

gregwhitworth commented Dec 16, 2015

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

This comment has been minimized.

Copy link
Author

usefulBee commented Dec 17, 2015

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 cvrebert added the confirmed label Jan 6, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jan 9, 2016

Fixed by #18775.

@cvrebert cvrebert closed this Jan 9, 2016

@cvrebert

This comment has been minimized.

@gregwhitworth

This comment has been minimized.

Copy link

gregwhitworth commented Jan 20, 2016

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

juanluisrp added a commit to GeoCat/core-geonetwork that referenced this issue Nov 3, 2017

fxprunayre added a commit to geonetwork/core-geonetwork that referenced this issue Nov 3, 2017

Delawen added a commit to Delawen/core-geonetwork that referenced this issue Nov 29, 2017

gjvoosten added a commit to NCI-Agency/anet that referenced this issue Apr 16, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.