Internet Explorer 10 doesn't display scroll bars correctly

[bakertony]

Hi, if you view:
http://handsontable.com/demo/scroll.html
in IE 10 (e.g. on Windows 8) the scrollbars show on the left (overwriting left most column) and without the dark grey scroll handle:

If you open the page in 'compatibility mode' it does display correctly.
Cheers for producing an awesome product overall though!
Tony.

[warpech]

I am downloading IE10 image from http://www.modern.ie/en-US/virtualization-tools to see what I can do. Thanks for the report!

[bakertony]

No problem. by the way, I've just started using http://www.browseemall.com/ which makes life rather easy for testing cross browser compatibility, although it is showing it working in IE10, doesn't work in actual IE10.
Also note that browseemall shows it not working correctly in IE8.
Cheers,
Tony.

[warpech]

I tried reproducing it but no luck. Are you doing something special to reproduce it?

[bakertony]

Doing nothing special at all! All my extensions are disabled.
I just bringing up IE10, paste in the URL http://handsontable.com/demo/scroll.html and hit return:

[bakertony]

Wow, OK, this is strange, I just toggled on 'compatibility view' to confirm that it displays correctly. I then turned OFF 'compatibility view' and it NOW displays correctly!
Still displays correctly now even after restarting IE.
Unfortunately, the same can't be said for handsontable in my Web app, scroll bar displays incorrectly when I toggle compatibility view back off again :-(
WTF?! Damn IE...

[bakertony]

Hmm, one thing I do, is load in the data from an ajax call, I wonder if loading in the data once the spread is displayed is causing the issue?

[warpech]

I am sorry that I didn't reply sooner. Is this reproducible in current version (0.8.20)? Again, I cannot reproduce it neither in IE10 or IE10 Compatibility View.

Does anyone else also have this issue?

[JellyRollMorton]

I was having this same problem with handsontable 0.8.20 under IE10 with my own app, but not with the official examples. In my app, I traced the start of the problem back to this section in the handsontable JS:

    , totalCount
    , visibleCount
    , tableOuterWidth = this.$table.outerWidth()

The problem was that this.$table.outerWidth() was equating to 0 in IE10, unlike other browsers and older versions of IE. That eventually caused the width of the slider to be set incorrectly.

I found that upgrading my old jQuery version from 1.7.2 to 1.9.1 allowed outerWidth() to return the intended value and for the spreadsheet to load normally.

[warpech]

Thanks! I updated README.md to mention that 1.9+ is the preferred version of jQuery. I consider this solved then!