Slow iOS scrolling due to translate 2D instead of 3D

[nicocunin]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior On iOS, scrolling horizontally (not tested vertically) requires multiple touches and is very slow.

Expected behavior It should be as smooth as on Android, desktop or any other devices.

Reproduction of the problem Use any iOS device with defined column width overpassing the available size for the table.

What is the motivation / use case for changing the behavior? It's unusable on iOS devices.

Table version: 11.1.7

• Angular version: 5.1.2

• Browser: Tested on iOS 11.2.2 but present on all iOS devices.

• Language: Typescript

Code to fix In utils/translate.ts, function translateXY uses 2D transform for Safari while CSS 3D transform is available.

I don't know the reason for that "!isSafari" test but I can tell that iOS properly handles CSS 3D transform and removing this test fixes this issue. Scroll is then smooth and comparable to Android or desktop environments.

[Corona17]

Hi, I am having similar issues with scrolling on iOS devices. I am developing an Ionic app and the performance of the ngx-datatable on iOS is unusable. The headers do not scroll with the content (they lag and jitter behind), frozen columns are not actually frozen and move with the user's scroll (you can see the rows scrolling behind the frozen column as well) and vertical scroll has rows 'pop up' after a short delay. Overall a very disappointing user experience on mobile.

@nicocunin I have tried your suggestion but this does not appear to fix my issues. (I guess since I am not using Safari browser but an Ionic app). I opened a support ticket over a month ago with no responses.. https://github.com/swimlane/ngx-datatable/issues/1212

A few other open issues with the same problems: https://github.com/swimlane/ngx-datatable/issues/744 https://github.com/swimlane/ngx-datatable/issues/620 https://github.com/swimlane/ngx-datatable/issues/526 https://github.com/swimlane/ngx-datatable/issues/239 https://github.com/swimlane/ngx-datatable/issues/620

I don't think I will be able to continue using this plugin as it is not mobile compatible. :(

[mrjamesriley]

Am seeing issues here as well - both on a brand new iPad Pro, and an older iPad Mini. Issue can be seen in both Chrome and Safari. Specifically I'm seeing the following two issues:

1) On a wide table (that comfortably exceeds the width of the page and thus requires horizontal scrolling), the header is lagging and jerky as the table scrolls.

2) Once having scrolled horizontally to the other end of the table, the columns that were initially hidden from view, cannot be sorted. Trying to sort with these headers (that are revealed as part of horizontally scrolling), has no impact on the previously hidden columns - but does sort the rest of the table (those columns that were in view when the page first loaded).

To get these previously hidden columns to have the sort applied, I need to horizontally scroll to the 'start' of the table (at the left), and scroll back to see the values refreshed.

[amcdnl]

it has a auto detect to see browser compat. not sure why ios is failing this? https://github.com/swimlane/ngx-datatable/blob/master/src/utils/translate.ts#L13

[nicocunin]

Personnaly, removing the isSafari test fixed the issue (tested on iPad pro), I integrated it in a gulp task to remove it from the release/index.js (which is used in angular dev build) and from release/utils/translate.js (which is used in prod build):

gulp.task('fix-ngx-datatable-slow-scroll-on-ios-part1', function () {
  return gulp.src(['node_modules/@swimlane/ngx-datatable/release/utils/translate.js'])
    .pipe(replace('!isSafari && hasCSS3DTransforms', 'hasCSS3DTransforms'))
    .pipe(gulp.dest('node_modules/@swimlane/ngx-datatable/release/utils'));
});

gulp.task('fix-ngx-datatable-slow-scroll-on-ios-part2', function () {
  return gulp.src(['node_modules/@swimlane/ngx-datatable/release/index.js'])
    .pipe(replace('!isSafari && hasCSS3DTransforms', 'hasCSS3DTransforms'))
    .pipe(gulp.dest('node_modules/@swimlane/ngx-datatable/release'));
});

I don't have any issues for detecting the css 3D transform capability of the targeted device.

@Corona17 For ionic app, it uses the web browser component available on the OS which is either UIWebView or WKWebView. If you're on a recent version of ionic it's the WKWebView which is used (https://ionicframework.com/docs/wkwebview/) and this is the same engine as Safari, Chrome (on iOS), etc. as iOS does not allow using other engines or embedding custom one like you can do on Android with CrossWalk for instance. Did you modify all the possible files containing the isSafari test ? When debugging on Safari, do you see the code (or css style) being used for the transform, does it use 2D or 3D transform ?