How to fix scrollX movement issue in jQuery DataTables on mobile devices?

Question

I have used below code to simulate fixed header with vertical and horizontal scroll bars. See example on jsFiddle.

$('#liveTable').dataTable({
      'bSort': false,
      'destroy': true,
      'aoColumns': [
                    { sWidth: "85px", bSearchable: false, bSortable: false },
                    { sWidth: "75px", bSearchable: false, bSortable: false },
                    { sWidth: "80px", bSearchable: false, bSortable: false },
                    { sWidth: "80px", bSearchable: false, bSortable: false },
                    { sWidth: "85px", bSearchable: false, bSortable: false },
                    { sWidth: "70px", bSearchable: false, bSortable: false },
                    { sWidth: "70px", bSearchable: false, bSortable: false },
                    { sWidth: "50px", bSearchable: false, bSortable: false }
                ],
      'scrollY': 200,
      'scrollX': true,
      'info': false,
      'paging': false
 });

The above code is working fine in Desktop.

But in mobile devices when I scroll body of the content header part not moving accordingly. There is some delay (flickering effect) in header movement in mobile devices.

How to fix that header movement issue in mobile devices?

Urbai

What version of the DataTables are you using? If it's not the latest (1.10.9), can you try 1.10.9 and see if you still experience the same problem? – Billbug

@Gyrocode.com, I have updated my version (1.10.9). Event after updating the version, same issue exists. – Urbai

Besides a problem with custom widths, it works fine on Android 5, no flickering. On what mobile platform do you see flickering? – Billbug

On some devices fixed position solutions are hard to do because there is poor support for the scroll event firing during momentum scrolling. Older iOS devices and android devices specifically suffer from this. There are some patches to fix this, but they are quite heavy and may induce flickering on a device that does not natively fire scroll events during momentum scrolling – Flambeau

In some cases adding translate3d(0,0,0) to the scrolling element may help, as it enables 3d acceleration for css movements on that element. – Flambeau

@GrahamBass, I have tried with translate3d(0,0,0) in my scrolling sections but no luck. – Urbai

@Gyrocode.com, Android 4.3 Jelly Bean version. – Urbai

@RGS, tried Android 4.3.1 with an emulator but didn't see any flickering. – Billbug

Have you had a look at this thread? datatables.net/forums/discussion/15908/… – Khotan

@CedricReichenbach, I had a look at that thread. Is it working solution? – Urbai

I can't tell, because I can't reproduce the issue on my phone. I guess it only affects older mobile browsers. – Khotan

@CedricReichenbach, Yes, It is not working in old mobile browsers. – Urbai

Answer 1

Try this if it works for you. It's the other way around, but it works. Maybe you'll just need to adjust width or whatsoever. Run it through jsFiddle to test it.

$.event.special.scrollstart = {
        enabled: true,

            setup: function() {
                var thisObject = this,
                    $this = $( thisObject ),
                        scrolling,
                        timer;

                function trigger( event, state ) {
                    scrolling = state;
                    var originalType = event.type;
                    event.type = scrolling ? "scrollstart" : "scrollstop";
                    $.event.handle.call( thisObject, event );
                    event.type = originalType;
                }


                $this.bind( scrollEvent, function( event ) {
                    if ( !$.event.special.scrollstart.enabled ) {
                        return;
                    }

                    if ( !scrolling ) {
                        trigger( event, true );
                    }

                    clearTimeout( timer );
                    timer = setTimeout(function() {
                        trigger( event, false );
                    }, 50 );
                });
            }
    };

Ok, if the flickering effect exists, try something like this. Your scroll is ok. It's the effect that sucks.

                document.getElementById("btn").addEventListener("click", function(){
                    var abc = document.getElementById("abc");
                    var def = document.getElementById("def");

                    abc.style["-webkit-transition-duration"] = "0ms";
                    def.style["-webkit-transition-duration"] = "0ms";
                    abc.style["-webkit-transform"] = "translate3d(0, 0, 0)";
                    def.style["-webkit-transform"] = "translate3d(100%, 0, 0)";
                    setTimeout(function(){
                        abc.style["-webkit-transition-duration"] = "1s";
                        def.style["-webkit-transition-duration"] = "1s";
                        abc.style["-webkit-transform"] = "translate3d(-100%, 0, 0)";
                        def.style["-webkit-transform"] = "translate3d(0, 0, 0)";
                    },
);
                }); 

Clotildecloture

Problem is not with the list, it's in this flickering effect. It was/still is some sort of bug. I updated my answer. Try it now. – Clotildecloture

ups, sry, I putted the line numbers when I cp-ed. – Clotildecloture

Is it possible to provide working example in fiddle? – Urbai

I think not, because you need some sort of GUI to see flickering. – Clotildecloture

There is no solution for this issue? – Urbai

I added the code that can bypass flickering effect. You need to test it to see if it works. – Clotildecloture

You need to put it into perspective of app that you are developing. I seriously doubt that you have 'abc' or 'def' in your code. I posted that for an example so you can guide yourself by it. – Clotildecloture

And how are you supposed to see the flickering effect? – Clotildecloture

I have seen the fiddle example in my androd Android 4.3 Jelly Bean version in Google chrome browser. – Urbai

Kindly provide working solution in fiddle. If the demo fiddle working fine in mobile, I am ready to give bounty to you. – Urbai

you need to put ID of the element that fired an event. You can use (this) to reference the object that fired the function. 'this' is a DOM element when you are inside of a callback function (in the context of jQuery), for example, being called by the click, each, bind, etc. methods. – Clotildecloture