It creates a really bad user experience, and makes the table function unusable when supporting iOS, (might be all touch devices )
Here’s an Ellie, which works as expected in a desktop browser, but scrolls in every possible direction on iOS - so if the user tries to scroll the page by flicking up or down on the table, all that happens is the table scrolls and not the page.
It appears that it may be related to the height of the content - increasing the number of rows removes this problem, but that’s only useful if there is a minimum number of rows taking up a minimum height.
I’ll continue digging around, hopefully someone has already solved this
Did you try adding El.clipY next to El.scrollbarX? There is a weird CSS issue, where setting overflow for one dimension changes the behaviour of the other unless it’s specifically defined to be something else.
Correction: It solved it in the Ellie, but not completely in my app.
I have some tables that are loaded with data that the user can then filter down in order to focus in on any number/combination of rows they choose.
When the data is first filtered, the table continues to behave as it should thanks to El.clipY, but when the device is rotated to change the orientation, then El.clipY appears to be ignored and we’re back to square to one.
I’ll post another Ellie shortly that shows the behaviour.
(There are zero changes to the view code when the device switches from Portrait to Landscape and back again)