SlickGrid.js viewport visibility toggling issues with Internet Explorer

Question

I'm using SlickGrid.js library and it is excellent!

Only major problem right now is with Internet Explorer (confirmed in 9, 10, and 11), but the standards compliant browsers like Chrome and FF work fine.

Problem: When grid is scrolled and then hidden and then re-shown in IE the scroll position is reset to top of grid, and the viewport/data is either cut off or completely hidden (depending on scroll amount).

Here is a fiddle that demonstrates the SlickGrid.js IE bug (using the author's simple example 1):

http://jsfiddle.net/crwxoc17/1/

Anybody have a generic fix for this or patch to slick grid?

I can call grid.resizeCanvas() to sorta fix the issue, but it resets scrollbar to top and it's very annoying to do this for every single grid just to deal with Internet Explorer.

Semi-working fix, but still screws up the scrolltop:

function onShowGrid1() { grid.resizeCanvas(); }

(Reviewing JS code now, but I have not yet confirmed whether the bug is Microsoft's or SlickGrid's)

Answer 1

This issue applies to any element in IE with overflow set to scroll or auto and whose visibility is toggled. There's a simple example here: https://jsfiddle.net/qkhxL6r8/4/

That said, if you'd like the scrollTop position to be preserved you could extend SlickGrid or create a wrapper a class that subscribes to the onScroll event, records the scrollTop value, and sets it on the viewport element when showing or hiding the grid. I modified your example code as a proof of concept here: http://jsfiddle.net/h9cu2cmp/4/

var lastScrollTop;
var scrollTimeout;

function updateScrollTop(e, args){

    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function(){
        lastScrollTop = args.scrollTop;
    }, 30);
}

//...

grid.onScroll.subscribe(updateScrollTop);

$('body').on('click', '.toggle-button', function(){
    $("#myGrid").toggle();
    if(lastScrollTop !== undefined){
        $("#myGrid").find('.slick-viewport').get(0).scrollTop = lastScrollTop;
    }
});

If you're using a remote data provider you can trigger ensureData for the updated scrollTop with grid.onViewportChanged.notify()