Как исправить фликкер при использовании трансляций и переходов Webkit

У меня очень простая демонстрационная работа, которая использует преобразования Webkit и переходы для плавной горизонтальной прокрутки между "панелями" (divs).

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

Вы можете увидеть демо здесь

Вам понадобится сафари или iPad, чтобы увидеть его в действии. Я никогда не видел, чтобы это происходило в любой из демонстраций для преобразований и переходов, поэтому я надеюсь, что это исправление.

Во всяком случае здесь код, который управляет вещью....

HTML выглядит следующим образом.

<html>
    <head>
        <title>Swipe Demo</title>
        <link href="test.css" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="functions.js"></script>
        <script type="text/javascript" src="swiping.js"></script>
    </head>
    <body>


    <div id="wrapper">
        <div class='panel one'>
            <h1>This is panel 1</h1>
        </div>

        <div class='panel two'>
            <h1>This is panel 2</h1>
        </div>

        <div class='panel three'>
            <h1>This is panel 3</h1>
        </div>

        <div class='panel four'>
            <h1>This is panel 4</h1>
        </div>
    </div>

    </body>
</html>

CSS выглядит так:

    body,
    html
        {
            padding: 0;
            margin: 0;
            background: #000;
        }

    #wrapper
        {
            width: 10000px;
            -webkit-transform: translateX(0px);
        }

    .panel
        {
            width: 1024px;
            height: 300px;
            background: #fff;
            display: block;
            float: left;
            position: relative;
        }

и javascript выглядит следующим образом:

// Mouse / iPad Touch
var touchSupport = (typeof Touch == "object"),
touchstart   = touchSupport ? 'touchstart' : 'mousedown',
touchmove    = touchSupport ? 'touchmove'  : 'mousemove',
touchend     = touchSupport ? 'touchend'   : 'mouseup';

$(document).ready(function(){

    // set top and left to zero
    $("#wrapper").css("top", 0);
    $("#wrapper").css("left", 0);

    // get total number of panels
    var panelTotal;
    $(".panel").each(function(){ panelTotal += 1 });

    // Touch Start
    // ------------------------------------------------------------------------------------------

    var touchStartX;
    var touchStartY;
    var currentX;
    var currentY;
    var shouldMove = false;
    document.addEventListener(touchstart, swipeStart, false);
    function swipeStart(event){

        touch = realEventType(event);

        touchStartX = touch.pageX;
        touchStartY = touch.pageY; 
        var pos = $("#wrapper").position();
        currentX = parseInt(pos.left);
        currentY = parseInt(pos.top);

        shouldMove = true;

    }

    // Touch Move
    // ------------------------------------------------------------------------------------------

    var touchMoveX;
    var touchMoveY;
    var distanceX;
    var distanceY;
    document.addEventListener(touchmove, swipeMove, false);
    function swipeMove(event){
        if(shouldMove){
            touch = realEventType(event);
            event.preventDefault();

            touchMoveX = touch.pageX;
            touchMoveY = touch.pageY;

            distanceX = touchMoveX - touchStartX;
            distanceY = touchMoveY - touchStartY;       
            movePanels(distanceX);

        }
    }

    function movePanels(distance){
        newX = currentX + (distance/4);    
        $("#wrapper").css("left", newX);
    }


    // Touch End
    // ------------------------------------------------------------------------------------------

    var cutOff = 100;
    var panelIndex = 0;
    document.addEventListener(touchend, swipeEnd, false);
    function swipeEnd(event){

        touch = (touchSupport) ? event.changedTouches[0] : event;

        var touchEndX = touch.pageX;
        var touchEndY = touch.pageY;

        updatePanelIndex(distanceX);

        gotToPanel();

        shouldMove = false;

    }

    // --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --

    function updatePanelIndex(distance){

        if(distanceX > cutOff)
            panelIndex -= 1;

        if(distanceX < (cutOff * -1)){
            panelIndex += 1;
        }

        if(panelIndex < 0){
            panelIndex = 0;
        }

        if(panelIndex >= panelTotal)
            panelIndex = panelTotal -1;

            console.log(panelIndex);

    }

    // --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --

    function gotToPanel(){

        var panelPos = getTotalWidthOfElement($(".panel")) * panelIndex * -1;

        $("#wrapper").css("-webkit-transition-property", "translateX");
        $("#wrapper").css("-webkit-transition-duration", "1s");
        $("#wrapper").css("-webkit-transform", "translateX("+panelPos+"px)");

    }

});

function realEventType(event){
    e = (touchSupport) ? event.targetTouches[0] : event;
    return e;
}

Ответы

Ответ 1

Попробуйте использовать translate3d вместо translateX. Похоже, только translate3d аппаратное ускорение на iPad 3.2.

Ответ 2

@gargantaun прав, Webkit мерцает, если элемент, который вы хотите оживить, больше, чем экран. Но есть легкое решение. Просто добавьте:

-webkit-backface-visibility: hidden;

к элементу, и вам хорошо идти!

Ответ 3

Как уже упоминалось выше, лучше использовать Translate3d из-за аппаратного ускорения, которое обеспечивает более плавные переходы.

Тем не менее, мерцание возникает, когда анимация div больше, чем экран. Итак, если у вас есть область, которая добавляет до 3,5 ширины экрана, которые вы хотите переместить горизонтально, она должна быть разбита на 4 divs, как это.

[1] [2] [3] [. 5]

Ни один из разделов не должен превышать высоты или ширину экранов.

Извините за опоздание при публикации этого ответа. Я полностью забыл об этом, пока не получил уведомление "популярного вопроса".

Ответ 4

Я получил мерцание, чтобы уйти, сначала получив представление в состоянии "3D". Сначала у меня есть все мои взгляды на сохранение-3D. Тогда у меня есть этот код,

MyNamespace.flickerFixer = function(children) {
 children.css({
  "-webkitTransform": "translate3D(0px, 0px, 0px)",
  "-webkit-transition": "1s ease-in-out"
 });
}

И затем я инициализирую его перед выполнением анимации веб-кита:

MyNamespace.flickerFixer($this.parent(".ui-content"));

Ответ 5

В настоящее время с iOS8 еще одним хорошим решением является применение overflow: hidden к инкриминированным элементам (или их контейнеру).

Ответ 6

На основе @tobiasahlin поговорите в WebExpo.

Самое лучшее решение для исправления Safari -

transform: translateZ(0);