bradbirdsall/Swipe — Issue #22: Implement a "render as you need" feature to improve performance
Author: parisholley
Created: 2012-01-05 00:31:18+00:00
State: open

I ended up getting this work somewhat, just need to fork the project and submit a potential implementation. The issue I had, was I was using this library to swipe the entire application, so you advance from one screen to the next. CSS transformations are much faster than using top/left etc, but performance is awful once you hit a large pixel count overall. In my example, the library calculated a total container width of 20k which made leveraging other libraries (such as jquery mobile) very difficult as any other rendering caused pauses.

My solution to this problem was two things. First, I only made "visible" the current slide, previous and next slide. That way, during transitions, it is only rendering 3 slides worth, instead of them all. On transition completion, it would then recalculate what prev/cur/next is, flip visibility and continue. I also had to put a restriction on preventing the user from swiping until the transition completed so they couldn't slide into a hidden one.

For the above to work, I have to absolution position everything instead of using inline, so that when something is display:none, things were positioned as they should. I believe I tried doing visible:none, but it still draws it even if it isn't displayed. Alternatively, we could wrap the content containers again and hide its content so we can maintain position through transitions.