MDN-Browser-Compatibility-Report-2020

Web developer quotes One interview participant went into great detail about the challenges getting touch interactions to work well on mobile for a "room planner" mobile web app. A condensed excerpt of the transcript of that interview follows: But what was really difficult was to get all the touch interaction right. It's really not a page [...] you can pan, you can zoom, you have all of these interactions and it's really not a page that you want to scroll on. We just struggled with stuff like the browser bar. If you want to scroll, maybe you have a scroll container somewhere inside, and then the browser bar appears and disappears. And you don't get resize events when the browser bar is in the process of disappearing, it just resizes after the browser bar disappears completely. Maybe in between it's not going to look so nice. Like what Google Maps does [...] you can pull it up from the bottom, then you have the details about a place. We had something similar to that for individual products on the wall. First we wanted that to have that be a native scroll interaction because we thought if it's just a native scroll it's going to be fast, it's going to be hardware accelerated, it's going to feel the nicest. But if you're working with native scroll it's very difficult to control it, because for example scroll event listeners are - for a good reason - passive now. I made the mistake of trying to use native scroll for something where I wanted to have too much control, again. If you scroll and there's a certain scroll velocity, and you lift your finger up and it keeps on scrolling, and it reaches a certain threshold and you want to have it snap there. [...] If you want to do it by JavaScript you can set the scroll position. On iOS I think that's going to stop the scroll velocity immediately. On Chrome it snaps to that point but it keeps on scrolling with the same velocity. [...] So it's pretty much impossible to control that. In the end I think we had to completely redo the scrolling [...] and just do all the scrolling by JavaScript.

I wanted to build a "simple" horizontal slider on a completely different project. I first thought it's just horizontal scrolling, if I'm going to use native

Made with FlippingBook - professional solution for displaying marketing and sales documents online