favorite twitter linkedin chevron-right

How I have solved an unpleasant crash on iPad.

Front-end development is becoming always more complex and build a web page isn’t just related to styling it, but we have to deal with performance, memory heap, reflow, networking, and also the simple and even more powerful CSS is not just a visual consequence of properties and values, but we have to think to it how a set of rules that have to be read and elaborated by different browsers so that each of those have a cost in terms of calculus computational and since the memory and the CPU are not unlimited disregard the complexity of code can cause serious damage. Here is my experience on how I solved an unpleasant crash on iPad.

What is happen in fact was the consequence of not have handled the edge case how Luke Wroblewski teaches us.

The goal

The project was to build different kind of modules such as Slider, Video, Gallery, Texts and so on, that can be assembled by an Editor to create a single-page individually.

The problem

The goal was achieved, and the page was well designed to be responsive and be navigated with touch devices. But what about of a page composed of more than 15 galleries with about 400 images not optimized and more than 10 youtube videos? Yes. It crashed on Ipad and now I think it’s pretty normal considering the amount of html and resources.

How I solved.

What I did first of all was to dismember the page until found the problem, and the problem was the amount of html that became generated by the gallery plugin, this means that also reducing the amount of images, the problem was still there, because in this case, the page was too complex to be elaborated by a mobile devices.

I tried several gallery plugin but didn’t work. So the only way was to reduce the markup and the complexity related to javascript and css, maintaining the same user experience.

Then I tried to use the simplest solution I know to reproduce a scroller on mobile, and it worked! What I did was to use the css property “overflow: scroll” on a image container, then, simulate a gallery, realizing in fact a fake gallery but with the same design and user experience like using a plugin.


The solution is pretty easy to implement, and combined with a lazy loading images it worked like a charm!

You can find the demo in my Projects section and all the code as a jquery plugin on github, feel free to use or fork it!

Be the first to leave a comment. Don’t be shy.

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>