Flip card with a scrolling element on each side using -webkit-overflow-scrolling: touch; on iOS 5

Question

I had a problem creating a flip card with a scroll element on each side with HTML, CSS and JS for Mobile Safari on iOS 5.

If you scroll through the map when the map is flipped over or not flipped, scrolling always occurs on the item on the rear panel. Scrolling never works on the front panel.

I have the following code:

HTML

<ol id="front" onclick="flip();"> <li>Front</li> ... <li>Front</li> </ol> <ol id="back" class="flipped" onclick="flip();"> <li>Back</li> ... <li>Back</li> </ol> 

Js

 function flip(){ var front = document.getElementById("front"); var back = document.getElementById("back"); if (front.className != "flipped") { front.className = "flipped"; back.className = ""; } else { front.className = ""; back.className = "flipped"; } } 

CSS

 #front, #back { position: absolute; width: 400px; height: 400px; overflow: scroll; -webkit-overflow-scrolling: touch; -webkit-backface-visibility: hidden; -webkit-transition: all 500ms linear; } #front.flipped { -webkit-transform: perspective(100px) rotateY(180deg); } #back.flipped { -webkit-transform: perspective(100px) rotateY(-180deg); } 

Here's the code in action (try it with iOS 5): http://jsfiddle.net/sennevdb/bDh5b/embedded/result

Answer 1

Sorry, this is not a reliable answer (I do not have time for code / test), but I would think that the problem is that you are only updating the conversions ... which do not affect where the browser really considers the elements .

You might consider using the webkitTransitionEnd event, which makes the z-index of the front of the card 10 and back 0.

Answer 2

This problem still persists in iOS6, at least in my case, when I have to scroll the div next to each other, and when I do the conversion transition, the scroll does not work.

My solution was to rewrite at least one of the divs after the transition using a simple jQuery statement:

 html.on('webkitTransitionEnd', '.one-of-my-scrollers', function() { setTimeout(function() { var d = $('.one-of-my-scrollers'); d.parent().append(d); }, 0); }); 

This somehow triggers the payment in the browser, causing the scrolling to work correctly again.

Another way to do this is to disable the element overflow and enable it again, for example:

 html.on('webkitTransitionEnd', '.one-of-my-scrollers', function() { setTimeout(function() { var d = $('.one-of-my-scrollers'); d.css('overflow', 'hidden'); setTimeout(function() { d.css('overflow', 'auto'); }, 0); }, 0); }); 

I call these things an ugly truth that we should not do ...