HTML5 swipe.js css3 transitions; offscreen rendering and caching of page elements

Question

I am building a HTML5 magazine for tablets and desktops with use of swipe.js (http://swipejs.com).

Everything seems to work fine, In one HTML page I have set next to each other fullscreen list elements. The whole magazine is build up in one static html file. I can slide through the pages by swiping on tablets, and by using buttons for the desktop version (consider the example on the swipe.js homepage, but then with fullscreen slides).

The pages are placed next to each other, and have the dimensions of the screen.

[ |0||1||2| .. |i-1||i||i+1| .. |n| ]

The swipe.js transitions are done with help of css3, using the translate3d() css function. In this case, hardware rendering is used.

On desktop (Chrome, Safari, FF), iPad1 and (even better on) iPad2 this has the desired effect I was looking for; smooth transitions. Perfect! However, on the iPad3, the pages seem to render 'slow' when entered (by transition) for the first time. Even without setting background images (just the color), the 'rendering' of the transitioned page is considered a little 'slow'; the page is build up by 'flickering' blocks.

Assumption: My assumption is (after reading into the subject), that this is because the browser only renders the elements that are in-screen, and will cache the swiped pages only for a while, cleaning the cache afterwards to control memory management.

My question: Is there a way to control the offscreen rendering and caching, so that I can force (pre) render page elements i-1, i+1 (and flush the cache for all other page elements), to speed up my transition rendering?

Note: In several topics on StackOverflow, 'flickering' of css3 transitions is mentioned. I have implemented the suggested CSS tricks but will not solve my case.

-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);

Answer 1

In the end the solution was a hack of Swipejs in which I added a method 'hideOthers()', setting the style visibility to 'hidden', which unloads the pages from hardware memory:

hideOthers: function(index) {
  var i = 0;
  var el;

  for( i in this.slides ) {
      el = this.slides[i];
      if ( el.tagName == 'LI' ) {
          // Show pages i-1, i and i+1
          if ( parseInt(i) == index
             || (parseInt(i) + 1) == index
             || (parseInt(i) - 1) == index
          ) {
              el.style.visibility = 'visible';
          }
          else {
              el.style.visibility = 'hidden';
          }
      }
   }
}

..and added the trigger below as last line in the 'slide()' method

// unload list elements from memory
var self = this;
setTimeout( function() { self.hideOthers(index); }, 100 );

Only the translate3d was needed to toggle the hardware acceleration on (as mentioned in my question above):

-webkit-transform:translate3d(0,0,0);

You can find the result (including iScroll for vertical scrolling) here.