Scroll not working on IE11

[ettysekhon]

Scrolling does not work on IE11 with example http://facebook.github.io/fixed-data-table/example-object-data.html.

[pieterv]

@ettysekhon Do you have any kinda of touch support on your laptop? I think this might be a configuration issue with the examples rather than a problem with the table itself. Thanks for the report, we will look into this!

[ettysekhon]

@pieterv I will check, i've tried it on 2 machines with IE11 and it doesn't work on both, although both are laptops (without touch).

[luisrudge]

I don't have touch support and scrolling isn't working. It doesn't show the scroll bar either.

[Axbon]

Not sure this has todo with bad touchdetection, however we've had to change how we detect touchsupport in some of our apps. Some computers "think" that they are touchactivated, particulary in Windows 8 with IE11 (even Chrome on some machines).

This can be caused by a service called "Tablet Service" in windows. The strange thing is that it does not happen on all machines, it does however happen even if there is no touchscreen on the machine. I also believe some external USB peripherals can cause touchsupport to be activated. The browser then uses some API in Windows to detect this, and it will be a "false positive".

I just tried (I am on a Macbook pro) but I got the Modern.ie image for Windows 8 with IE11 and the scrolling does not appear to work there either in the datatable. I am refering to these images using Virtual Box: https://www.modern.ie/en-us/virtualization-tools#downloads

Checking for touch in IE11 does in fact give me correct values, since I have no touchsupport:

'ontouchstart' in Window === false
window.DocumentTouch === undefined
document instanceof DocumentTouch === 'DocumentTouch' is undefined

I guess we can rule out this being a "touch" issue then :)

[pieterv]

Im pretty sure this is related to our touch checking code, our internal apps that use the table are working fine with IE11 but i am able to reproduce this issue on the example site. You can also see how no scroll bar is showing up which tells me table scrolling is explicitly being turned off as would happen if it thinks it should be using touch. Sorry this should be easily fixable but i haven't had the time to do it yet, i will get to it pretty soon :)

[luisrudge]

@pieterv you mean facebook is using another version? :D

[pieterv]

@luisrudge No we are effectively using the version that is on github master along with react master :) But the places where it is used don't currently support touch so we don't have the added touch support wrapper that we have for the FixedDataTable site examples, thats why i'm pretty sure its not a problem in the core table as we would know about it if was :P

[luisrudge]

Ah, oh. Thanks for the clarification! Awesome that you guys are using the same version!

[box-turtle]

I'm trying the simplest possible example of fixed data table on Windows 7 with IE10 (I know, everyone's favorite.). Scrollbar shows up, but mouse wheel doesn't work. Clicking and dragging scroll doesn't work. Clicking in empty area of scroll bar does do page up/down.

If I run the debugger, the error "Invalid Calling Object" is thrown on line 61 of ReactWheelHandler.js.

this.$ReactWheelHandler_animationFrameID = requestAnimationFramePolyfill(this.$ReactWheelHandler_didWheel);

I think the issue has to do with the logic in requestAnimationFramePolyfill - some IE weirdness in binding requestAnimationFrame to the global object.

If I replace requestAnimationFramePolyfill with window.requestAnimationFrame then scrolling with the mousewheel works (albeit slowly).

I'll try to look into this a bit more tomorrow.

[box-turtle]

I think we are running into the same ie issue described here:

caolan/async#299

except in this case it is due to calling requestAnimationFrame as a property of "global".

var nativeRequestAnimationFrame =
  global.requestAnimationFrame       ||
  global.webkitRequestAnimationFrame ||
  global.mozRequestAnimationFrame    ||
  global.oRequestAnimationFrame      ||
  global.msRequestAnimationFrame;

module.exports = nativeRequestAnimationFrame;

I don't know where in the code the window objects are bound to "global" - I am guessing some webpack dark magic.

[box-turtle]

Pretty sure this is a horrible hack, but putting this here in case it helps someone smarter than me fix this.

Based on this bug report: caolan/async#299 and not having a really good understanding of how to intercept the binding of global.requestAnimationFrame, I added this code to nativeRequestAnimationFrame.js

if (requestAnimationFrame) {
  global.requestAnimationFrame = requestAnimationFrame.bind(null);
}

var nativeRequestAnimationFrame =
  global.requestAnimationFrame       ||
  global.webkitRequestAnimationFrame ||
  global.mozRequestAnimationFrame    ||
  global.oRequestAnimationFrame      ||
  global.msRequestAnimationFrame;

module.exports = nativeRequestAnimationFrame;

and this code to cancelAnimationFrame:

 if (cancelAnimationFrame) {
   global.cancelAnimationFrame = cancelAnimationFrame.bind(null);
 }


var cancelAnimationFrame =
  global.cancelAnimationFrame       ||
  global.webkitCancelAnimationFrame ||
  global.mozCancelAnimationFrame    ||
  global.oCancelAnimationFrame      ||
  global.msCancelAnimationFrame     ||
  global.clearTimeout;

module.exports = cancelAnimationFrame;

If you do this then mousewheel and dragging of scrollbar work in IE 10. However, performance is terrible.

The change does not seem to affect Firefox or Chrome, scrolling remains fast and smooth in those browsers after the change.

[box-turtle]

Tested the fix above on IE11, and it works there too. Also, scrolling is smooth and fast on IE11 (janky on IE10 but who cares).