iOS scrolling stops when horizontal scoll bar goes to start

[stuta]

Describe the bug

Go to https://6pac.github.io/SlickGrid/examples/example-trading-esm.html with iPad or iPhone.

When you swipe down directly or right-down scroll works perfectly. But when you swipe left-down so that the horizontal scrollbar hits the left start, then the scroll stops. It's very hard to scroll up or down when you want to see the first column. This problem does not happen when the horizontal scrollbar is to the right.

I guess that this is due to a feature when you drag the area to the right it shows white space before the first column. Maybe it has some function, but it is not correct because headers do not move at the same time. Remove that feature and the scroll stopping will be fixed.

I found an old issue mleibman/SlickGrid#573. This fix works because it removes the horizontal scrollbar.

.slick-viewport {
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden !important;
}

Reproduction

Go to https://6pac.github.io/SlickGrid/examples/example-trading-esm.html with iPad or iPhone.

Which Framework are you using?

Vanilla / Plain JS

Environment Info

| Executable          | Version |
| ------------------- | ------- |
| SlickGrid | 5.12.0 |
| Browser(s)          | All iOS (tested Safari, Edge) |
| System OS           | tested iPad, iPhone |

Validations

• Follow our Code of Conduct
• Read the Wikis.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[xvaara]

What he means:
When the scroll hits the left side the vertical inertia scrolling stops.

[ghiscoding]

I don't have any such hardware to test but what I wonder is if this CSS change has any impact on regular browsers, the use of !important seems rather drastic. I also don't quite understand the problem, so we might need more tests/confirmations before doing any changes. But even then, this fix can be implement by the user itself, do we really need a fix in the project?

[stuta]

That .slick-viewport overflow-x: hidden !important; prevents horizontal scrolling.

So it is not a fix, it makes the screen unusable because you can't see the columns on the right. But with that "fix" the inertia scrolling works. It was just a hint to help fix the real problem.

I tested this with an old Android phone, it works correctly with vertical inertia scrolling.

[ghiscoding]

Well ok but I still don't quite get the problem and also don't have the hardware to test this either and so any fix would really have to come by someone like you via a PR Contribution.

[stuta]

Can you give me info what files may need fixing? Is it only css or is some JavaScript running when inertia scrolling is running?

[ghiscoding]

well like I said earlier, I don't really understand the problem so No I cannot provide any info but maybe some guidance of maybe where to look. The only thing I can say is that all the files are in the src/ folder.

JavaScript running when inertia scrolling is running?

I have no idea what you mean, but all I can say is that CSS styling are applied by CSS files and by JavaScript code from the project. There's an onScroll event that user can optionally subscribe to.

SlickGrid/src/slick.grid.ts

Lines 5125 to 5130 in b3c2943

	this.trigger(this.onScroll, {
	triggeredBy: eventType,
	scrollHeight: this.scrollHeight,
	scrollLeft: this.scrollLeft,
	scrollTop: this.scrollTop,
	});

all the JS code that is being executed when scrolling is in the _handleScroll internal function, you may take a look to see what it does and if you find anything then contribute a PR

SlickGrid/src/slick.grid.ts

Line 5018 in b3c2943

protected _handleScroll(eventType: 'mousewheel' | 'scroll' | 'system' = 'system') {

[stuta]

Debugging with iPad or iPhone is a little bit tricky.

Let's try to clarify what I mean:

When the horizontal scrollbar goes to the start left the inertia scrolling stops. Thos does not happen in computer browsers or in Android browsers, only in iOS (any version, any broser).