internet-explorerturnjs

Turn.js: Pages with class="fixed" vanishing during animation in Internet Explorer


I'm using the 'fixed' class to keep inner cover pages visible when the book is open. However they briefly disappear during any page turn animation or corner curl. It happens only in internet explorer (any version - I've tested IE7,8,9,10). I'm stumped as to why. Any help would be massively appreciated. Thanks!

Code gist with demo: http://bl.ocks.org/richardwestenra/6041734

TurnJS documentation: http://www.turnjs.com/#api


Solution

  • After hours of trial and error I've found a fix: I applied an 'innerCover' class to all the pages, and used the following code to remove that class from the pages that are being turned at the start of the turn, so that they look like an inner page as you make the turn. It's a bit hacky but it works:

    $('.flipbook').turn({
        when: {
            start: function(e, page, view) {
                var book = $(this),
                    currentPage = book.turn('page'),
                    pages = book.turn('pages');
                for(var i=3; i<pages; i++){
                    if(i==page.page || i==page.next) {
                        $('.p'+i).removeClass('innerCover');
                    } else {
                        $('.p'+i).addClass('innerCover');
                    }
                }
            }
        }
    });