Turn.js: Страницы с class = "fixed" исчезают во время анимации в Internet Explorer

Question

Я использую «фиксированный» класс, чтобы сохранить внутренние страницы обложки видимыми, когда книга открыта. Однако они ненадолго исчезают во время анимации поворота страницы или поворота в углу. Это происходит только в Internet Explorer (любая версия - я тестировал IE7,8,9,10). Я в тупике, почему. Любая помощь будет широко оценена. Благодаря!

Код сутью с демо: http://bl.ocks.org/richardwestenra/6041734

TurnJS документация: http://www.turnjs.com/#api

Answer 1

После нескольких часов проб и ошибок я нашел исправления: я применил класс «» innerCover ко всем страницам, и используется следующий код, чтобы удалить этот класс со страниц, которые были повернуты в начале поворота, чтобы они выглядели как внутренняя страница по мере поворота. Это немного Hacky, но это работает:

$('.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

Я также пытаюсь решить этот вопрос, и ответ здесь не очень похож на работу для меня. Я думал, что пойду и брошу свои 2 цента здесь, если он указывает кого-то еще в правильном направлении.

Я установил начало поворота, чтобы дать .animate класс фона внутренних обложек при повороте внутренних страниц. У него определенно есть проблемы, и это довольно хакерское, но до сих пор, похоже, самое близкое, что я пришел к ответу. Вот в основном то, что я делаю (12 страниц книги, включая обложки):

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