I tend to make a lot of use of PhoneGap – it’s great for getting an iPhone / iPad project (that isn’t too complex) up and running quickly, either for prototyping or even for final releases. Â However, there’s some shortcomings, one of which is PhoneGap makes use of MobileSafari, which has it’s own little freaky problems.
Unfortunately, I found a project the Accordion harfs on a bit – my upcoming project has a section that’s an accordion with quite a few elements, and a LOT of formatting and div’s insides those elements. Â It was bad enough it took over four seconds for the page to load on an iPad!
So I dug into his library to do a little optimizing – I posed the results on his page, but am also posting them on here for those googling for a solution 🙂
This, BTW, is for version 1.0 of HW Accordion and 3.7.1 of iScroll – your milage may vary if you’re using other versions!
So, part 1 is for people who are supporting iOS and Android (part 2 breaks Android), particularly when using PhoneGap.
First, in accordion.js, comment out:
/* that.wrappers[i].style.webkitTransitionProperty = â€˜-webkit-transformâ€™; that.wrappers[i].style.webkitTransitionTimingFunction = â€˜cubic-bezier(0,0,0.25,1)â€™; that.wrappers[i].style.webkitTransitionDuration = â€™0â€²; */ (lines 35 â€“ 37)
Â /* accordions[i].style.webkitTransitionProperty = â€˜-webkit-transformâ€™; accordions[i].style.webkitTransitionTimingFunction = â€˜cubic-bezier(0,0,0.25,1)â€™; accordions[i].style.webkitTransitionDuration = â€™0â€²; */
In your CSS under #accordian > div add:
-webkit-transition-property: -webkit-transform; -webkit-transform-duration: 0; -webkit-Transition-Timing-Function: cubic-bezier(0,0,0.25,1);
and under #accordion > div > div:last-child add the same bit.
Now, if youâ€™re not worried about Android, or can do separate compiles for iOS and other platforms (for instance, using PhoneGap rather than loading from a website, or if you can do platform dependent includes), then thereâ€™s a second speed boost you can pull off thatâ€™s more significant.
And Iâ€™ll make sure this is clear: Â THIS ONLY WORKS ON iOS AND BREAKS ANY NON-3D ACCELERATED WEBKIT PLATFORM. (There, that made me feel better. 😉
First, do everything thatâ€™s described in part 1. Thenâ€¦
In accordion.js comment out:
// accordions = document.querySelectorAll(â€˜#â€™ + el + â€˜ > div > div:last-childâ€™); (Line 30) Â // that.wrappers[i].style.webkitTransform = translateOpen + â€™0,0â€² + translateClose; (line 38) /* for (i=0, l=accordions.length; i div and #accordion > div > div:last-child Â accordions[i].style.webkitTransitionProperty = '-webkit-transform'; Â accordions[i].style.webkitTransitionTimingFunction = 'cubic-bezier(0,0,0.25,1)'; Â accordions[i].style.webkitTransitionDuration = '0'; Â accordions[i].style.webkitTransform = translateOpen + '0,0' + translateClose;} (lines 49 - 54)
Then, in your CSS add:-webkit-transform = translate3d(0,0,0);
to both #accordion > div and #accordion > div > div:last-child.
Now load time for my complex page goes from just over 2 seconds to instant.
The translate3d bit is what breaks Android â€“ no 3d transform for the webkit version. Sorry. However, if youâ€™re compiling using PhoneGap or similar, you can always make two CSS files and just include the right one in each project, and use the non-3D transform for other platforms besides iOS.
Hope that helps anyone whoâ€™s ran into some slowdown before!