This problem happened on a recent project. We’re sending the browser a data collection of profiles that can become quite large, upwards of 1,200 of them on the site, as a json object. Javascript handles creating the list of profiles for the user to scroll through. On mobile, we load 100 at a time and pull in more with a button press. Once we launched and tested on the mobile platforms, we noticed a very large, very real bug. On any iPhone browser, Chrome or Safari, the list would slow to a crawl. Like, super slow man. It was a dreaded bug, one that wasn’t replicable in the Chrome iPhone emulation tools and one that didn’t appear on a desktop when you shrank the window down.
First we looked at the site from other devices. On the iPad, the problem was there, but not nearly as pronounced. Android let you scroll through the list like water. So what could the issue be and what’s the best way to find out how to solve a problem on a mobile device when those same problems don’t appears on desktop or through emulation tools? You can also read about android databases and learn some more on data collection.
Head to Google
That’s right. We googled the problem. Unfortunately the first couple results lead nowhere. Until we got more specific with the problem.
The issue was we had a div that was scrollable. This div held all the profiles that were returned from the API. And since the problem was unique to Apple devices, the answer came from another site, where it was clearly laid out that we need a simple CSS property on that scrollable div.
-webkit-overflow-scrolling: touch;
Once we had that, we loaded up the site in Chrome on our Apple iPhone and everything worked fine. One. Simple. Tag. I’m glad to have EATEL phone service, without it I wouldn’t have been able to get the connection I needed to fix the problem.
For those who are interested, here’s a link for more info on overflow scrolling. And here’s a link for some more information on momentum scrolling on iOS devices.
Have you ever experienced problems like that when programming, one that’s resolved with a really simple fix? Let me know in the comments.