Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Bootstrap 3 unwanted horizontal scrolling in IE

Featured Replies

Hi all,

I have built this (http://goo.gl/plH43k) using bootstrap 3 and i'm just adding finising touches but something is really bugging me in IE. If i open the site in IE11 or below initially everything loads up and it looks fine but if i start scrolling to the bottom the horizontal scrollbar appears. I've checked all my code and i just cant seem to figure out what is causing this. Its my first time using bootstrap or anything responsive for that matter but i decided to check the bootstrap demo page and i get the same behaviour there (http://getbootstrap.com/examples/theme/) so i'm wondering if this is some sort of bootstrap bug that has been overlooked. Any thoughts?

Edited by gfxpixeldesigns

you could try and use something like this

 

 

html, body {
overflow-x: hidden;
}

 

This would remove the horizontal scroll but not fix the underlying issue.

you could try and use something like this

 

 

html, body {
overflow-x: hidden;
}

 

This would remove the horizontal scroll but not fix the underlying issue.

 

Definitely NOT recommended. The main issue should be fixed and this is simply covering up something which could become a bigger problem later on.

  • Author

Its very strange and frankly i've never seen anything like it but then again this is my first time with bootstrap.

 

What i have noticed is if i scroll slowly the horizontal scroll bar doesnt appear but if i scroll rapidly it does.

 

I would rather find the issue at hand rather than cover it up but how do you debug something like this as theres no overflow that i can see?

I have just tested on IE11 and everything looks normal and i cant get the x axis scroll bar, what screen resolution are you using?

  • Author

Running at 1920x1080 here but it happens on all resolutions.

 

I'm also in IE11 desktop mode on windows 8.1

  • Author

Heres a screenshot of what i am seeing. Note that you have to scroll fast otherwise the scrollbar doesnt appear.

 

The as low as price link seems fine here so i'm not sure what you mean there; could you possibly attach a screen grab?

post-2387-0-97917600-1402325746_thumb.gif

  • Author

this is what happens when you resize it....

the blocks lose formatting....

 

I am also not getting that horizontal line? tried it on a windows 7/xp machine?

 

Thanks for the attachment. i'm guessing that must be IE7? Havent really looked into supporting IE7 to be honest; i have added respond.js for basic media query support but thats probably as far as i'm going with it. So for now its just IE8+ but thanks.

  • Author

nope im not on IE7! i tried it with IE8,9,10 and edge!

 

still got that problem when you resize window, are you not getting that problem then?

 

I am on a windows 7 machine.

 

Okay just saw the grey title bars and presumed ie7 my bad!

 

I cant see that my end but i'll load up my XP machine and check as you may be onto something there.

  • Author

Ok that should be fixed now but still seeing this god for saken scrollbar! In truth the mobile layout needs a bit of fine tuning as there are all sorts of odd things going on there but i wanted to get to the bottom of the scroll bar first. Best to sort all the normal styles before i start messing with anymore media queries ;).

maybe you messed up your user agent on IE??? because i can't replicate that problem... best try it on another machine just in case!

 

One other thing i do is i take everything away, and then start adding modules back one by one until the problem occurs again!

  • Author

Well i already tried stripping it down yesterday so i was left with the base bootstrap dependencies but the scrollbars were still present. I've checked a dozen bootstrap sites including the offical bootstrap examples and i see the same issue there too. This is why i think it may be a bootstrap bug rather than something i have done but perhaps with it being so difficult to spot its not been documented at all- i must be the first to spot it lucky me.

 

What i could do with is someone running windows 8 (specifically 8.1) with IE11 to verify they are seeing the scrollbars too. The only other machine i have to test on is my XP machine which has IE8 installed and there is no horizontal scroll bar appearing there. IE11 compatibility view shows the issue in all IE versions. My guess if your not seeing the scrollbar in windows 7 is that its IE11 or possibly windows 8 specific but without having any other hardware to test it on i just dont know.

  • Author

Possibly speed related as i noted above if i scroll extra slowly it doesnt happen.

 

jQuery updated to the latest version and i've also made sure all my javascript is under one script which should make the site load extra fast. But you guessed it still the scroll issue is there.

Seems like a problem with your machine if you are seeing this on the official bootstrap site as they will have clearly done plenty of browser testing themselves.

  • Author

Seems like a problem with your machine if you are seeing this on the official bootstrap site as they will have clearly done plenty of browser testing themselves.

Well dont i feel silly right now :rolleyes: .

 

Reset IE to default settings and the problem has gone away so all that time for nothing.

 

Still no idea what caused it; i never use IE so there were no extensions installed but somehow it got borked and caused me a world of pain. Typical Internet Explorer for you that.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.