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

Question

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

Answer 1

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');
                }
            }
        }
    }
});

Answer 2

I'm also trying to solve this issue and the answer here doesn't really seem to work for me. I thought I'd go ahead and throw my 2 cents in here in case it points someone else in the right direction.

I've set the turn start to give the .animate class a background of the inside covers when turning inner pages. It definitely has it's issues and it's pretty hackish but so far seems to be the closest I've come to an answer. Here's basically what I'm doing (12 page book including covers):

start: function(e, page, view, pageObj) {
var book = $(this),
currentPage = book.turn('page'),
pages = book.turn('pages');

if(page.page !== 1 && page.next !== 1 && page.page !== 12 && page.next !== 12) {
    $('.animated').css('background-image','url(/views/Home/pics/insidecovers.jpg)').css('background- size','cover');
} else {
    $('.animated').css('background-image','');
}