search

bvaughn / react-virtualized

React components for efficiently rendering large lists and tabular data
http://bvaughn.github.io/react-virtualized/
MIT License
26.39k stars 3.06k forks source link

Mobile - Grid is flickering on horizontal scrolling #955

Closed lior8813 closed 3 weeks ago

lior8813 commented 6 years ago

When using react-virtualized Grid on iphone (both Safari and Chrome), there is an issue with horizontal scrolling.

You can have a look on the issue here: https://www.youtube.com/watch?v=087MM98zF28

It seems that during one of the touch events, the list left offset is set to 0 when it's actually higher, which make the grid flicker.

TrySound commented 6 years ago

@bvaughn I saw similar with new grid on vertical scrolling too.

bvaughn commented 6 years ago

"new grid" ?

TrySound commented 6 years ago

@bvaughn I meant similar behavior to https://github.com/bvaughn/react-virtualized/pull/515 vertical scroll from first point of view.

GulinSS commented 6 years ago

It seems that during one of the touch events, the list left offset is set to 0 when it's actually higher, which make the grid flicker.

I see same effect but on plain vertical list with large amount of images. I should even say than more images are in viewport then more notable that effect.

Also, FYI it never sets to 0. I checked it. Looks like it is a rendering issue of browser, not even react-virtualized.

GulinSS commented 6 years ago

Look into this: https://github.com/bvaughn/react-virtualized/pull/566 Here @toddtarsi said he thought it is related to -1 values for scroll during overscroll ios feature. But later he said this:

however I still get visual flickers when over scrolling downwards past the bottom of a list.

But our issue looks same. And it can be watched in the middle of the list. It means fix of @toddtarsi was wrong. He just disabled list updates on <0 but it doesn't solve primary issue.

GulinSS commented 6 years ago

What is even more interesting. This issue can be notable more when WindowScroller is used. I would say I noted it first only when wanted to use WindowScroller. But later I can trace it even on lists w/o WindowScroller.

toddtarsi commented 6 years ago

The issue I was concerned with was the iOS rubberband scrolling colliding with react virtualized. I believe scrolling in the rubber band region on iOS (that little bit when you drag the top of the scroll area and it slides down slightly) would attempt to reset the value to 0 from react virtualized, leading to a flicker as it jumps back and forth between where it is, the rubber band region, and where it thinks it is, row 0. For my issue, being that single column lists were flickering in the rubber band region on iOS, the resolution served my needs well enough. Then, later on, I believe this code was walked back out of the codebase. The PR has some more context that may benefit you @GulinSS.

https://github.com/bvaughn/react-virtualized/pull/616

GulinSS commented 6 years ago

My issue was about height: auto at iOS for long lists of images. iOS was unable calculate proper height for mode with WindowScroller. It was the reason of flashes. I suppose this side effect was due of large GPU memory usage by these images. But I am not sure exactly why iOS was unable do it. If I am setting height of scroll area div to same value as scrolled content it works. I am still searching roots and solutions.

iOS 10 and 11.

eokoneyo commented 6 years ago

@GulinSS I have the same issue, I have a large list that also displays images it flickers when I allow images to load, I also noticed that when I dont allow images to load scroll works fine... I'll create a gif and attach it as soon as I can

andrewvmail commented 6 years ago

I'm noticing the same issue for vertical grid here, also displaying images.

cvanem commented 5 years ago

I had a similar issue with a data grid. I spent 3 days debugging and didn't find any coding or scroll event errors with the grid code. In my scenario, the flickering was caused by the bouncing of of the scrolling view.

In my project, I am using Cordova and an inappbrowser, so I have control over the webview and scroll view elements. I was able to manually disable bouncing on all scroll views, which fixed my problem perfectly. Unfortunately, I am not sure that there is a way to disable this within the standard chrome/safari browser...I tried quite a few things.

For the solution that I used, see the post by daansystems here: https://github.com/ionic-team/ionic-v3/issues/113

I suspect that the bug lies somewhere within the iOS Webkit code and handling of the scroll bouncing events, but it is unclear. Disabling the bouncing on the scroll view at the wkwebview level does fixes the problem and produces a nice scrolling solution.