CSS Transform迫使Safari重新加载页面

Question

我正在使用Codrops的bookblock插件制作幻灯片，可以在此处找到演示-BookBlock A Content Flip Plugin

在所有浏览器中都可以使用，但是在iPhone Safari中，每次加载页面时都会重新加载页面。我已经在网上搜索过，发现它可能归因于CSS转换属性，但是我必须使用它，因为滑块取决于它。

主要问题似乎是动态幻灯片缩放功能，我已经编写了此功能来缩放幻灯片以适合任何窗口（实际幻灯片尺寸为2048x1536px）。

app.scaleSlide = function () {
    var scaleValue = 1,
        slideWidth = 2048,
        slideHeight = 1536,
        newSlideHeight = 0,
        newSlideWidth = 0,
        mainWrapperTopMargin = 0;

    // decide if viewport is in portrait mode or in landscape mode
    if(($winW >= $winH) && ($winW - $winH > 210)) {
        // calculate scale value
        scaleValue = parseFloat ($winH / slideHeight);
        console.log('landscape: '+scaleValue);

        // calculate new slide height & width
        newSlideHeight = $winH;
        newSlideWidth = parseFloat((slideWidth * newSlideHeight) / slideHeight);
        console.log('landscape H W: '+newSlideHeight+'/'+newSlideWidth);
    }
    else {
        // calculate scale value
        scaleValue = parseFloat ($winW / slideWidth);
        console.log('portrait: '+scaleValue);

        // calculate new slide height & width
        newSlideWidth = $winW;
        newSlideHeight = parseFloat((newSlideWidth * slideHeight) / slideWidth);
        console.log('portrait H W: '+newSlideHeight+'/'+newSlideWidth);

        // calculate top margin of main wrapper
        mainWrapperTopMargin = parseFloat(($winH - newSlideHeight) / 2);
    }


    // assign new slide height & width
    $('.slide-main-wrapper').css({
        width : newSlideWidth+'px',
        height : newSlideHeight+'px',
        marginTop : mainWrapperTopMargin+'px'
    });

    // add zoom to the slide
    $flipBookOuter.css({
        '-webkit-transform' : 'scale(' + scaleValue + ')',
        '-moz-transform'    : 'scale(' + scaleValue + ')',
        '-ms-transform'     : 'scale(' + scaleValue + ')',
        '-o-transform'      : 'scale(' + scaleValue + ')',
        'transform'         : 'scale(' + scaleValue + ')'
    });

    // remove loader
    /*$loader.animate({top: '100%'}, 800, function (e) {
        $(this).remove();
    });*/

    // activate flipbook
    app.flipBook.init();

    // start animation
    //app.startAnimation();

 }