Grid with independently scrolling rows in iOS web app

[baronx]

I'm trying to make a grid of thumbnail images, where the individual rows can be scrolled horizontally, and the whole grid can be scrolled vertically. Since each row is a category, I can't just let them all flow together, like, say, Google Images results page does. This will be on a web app that will typically be used on a tablet. (it has a somewhat different UI on a desktop web browser)I have had success on Android devices by using a combination of "overflow-x: hidden", "overflow-y: scroll" on the grid container div, and the opposite on the row container div.On iOS, I've also added "-webkit-overflow-scrolling-x: touch;" to get the native style inertial/bouncy scrolling. This almost works. The scrolling is smooth as butter, and when you do it right, the effect is perfect.The problem is that sometimes, trying to scroll the thing vertically will not work because it thinks it is trying to scroll a row rather than the whole grid. And vice versa for trying to scroll horizontally. It tends to work ok if you wait until it has completely stopped stopped scrolling vertically before trying to scroll horizontally (or vice versa).Note that disabling "-webkit-overflow-scrolling-x: touch;" doesn't help with the problem.Is there any solution to this problem? Javascript solutions are fine, but I don't want to sacrifice the smoothness of the scrolling. In fact I'd be happy with just a link to a site that does this, just to know if it is solvable.