Question

I am developing a website that will have a carousel on a page using iScroll 4. I noticed a strange problem on Android 2.2 and 2.3 devices. I did not notice it on Android 2.1 or Android 3 or any non-Android device. This problem happens whether I use iScroll 3 or iScroll 4.

When I press the back or forward buttons, the carousel does not properly update. The images don’t scroll, or they only scroll partway. If I press the forward button enough times, it may disappear as if I have reached the end of the list (as a result of my style on the “disabled” class), and likewise with the back button.

If I scroll the page up or down, then the carousel will update and work fine for a while. Does anyone know why this is happening or what to do about it?

You can see an example at http://jsfiddle.net/R4NWE/. If you want to access the example directly using a mobile browser, you can do so at http://fiddle.jshell.net/R4NWE/show/.

Answer 1

I figured out a solution. I put this in the “scroll” option that I am passing to CarouFredSel:

onAfter: function() {
    var transform = $("#scroller").css("-webkit-transform");
    $carousel.closest("#scroller").css("-webkit-transform", transform);
}