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

Question

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

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

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

Answer 1

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

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