How to fix flicker when using Webkit transforms &

I have a very simple demo working that uses Webkit transforms and transitions for smooth horizontal scrolling between 'panels' (divs).

The reason I want to go this route as opposed to a Javascript driven system is that it's for the iPad and Javascript performance is quite poor, but the css transforms and transitions are smooth as silk. Sadly though, I'm getting a lot of flicker on the iPad with my Demo.

You can see the demo here

You'll need safari or and iPad to see it in action. I've never seen this happening in any of the demos for transforms and transitions so I'm hopeful that this is fixable.

Anyway here's the code that powers the thing....

The HTML looks like this.

<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>

The CSS looks like this

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

and the javascript looks like this

// 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;
}

标签： html css safari webkit

7条回答

我欲成王，谁敢阻挡

2楼-- · 2020-02-16 07:26

As mentioned above, it is better to use Translate3d due to the hardware acceleration which makes for smoother transitions.

However, the flicker is caused when the div being animated is larger than the screen. So, if you have an area that adds up to 3.5 screen widths that you wish to transition horizontally, it should be broken up into 4 divs like this

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

None of the divs should exceed the screens height or width.

Sorry for the lateness in posting this answer. I'd completely forgotten about it until I just got a "popular question" notice.

0人赞添加讨论(0) 举报

一纸荒年 Trace。

3楼-- · 2020-02-16 07:31

@gargantaun is right, Webkit flickers if the element you want to animate is bigger than the screen. But there is an easy fix. Just add:

-webkit-backface-visibility: hidden;

to the element and you are good to go!

0人赞添加讨论(0) 举报

手持菜刀，她持情操

4楼-- · 2020-02-16 07:33

I got the flicker to go away by first getting the view to be in a "3D" state. First I have all my views have the preserve-3D on. Then I have this code,

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

And then I initialize it before doing webkit animations:

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

0人赞添加讨论(0) 举报

小情绪 Triste *

5楼-- · 2020-02-16 07:38

Nowadays, with iOS8, another good solution is to apply a overflow: hiddento the incriminated elements (or their container).

0人赞添加讨论(0) 举报

爱情/是我丢掉的垃圾

6楼-- · 2020-02-16 07:43

Try using translate3d instead of translateX. It appears only translate3d is hardware accelerated on iPad 3.2.

0人赞添加讨论(0) 举报

萌系小妹纸

7楼-- · 2020-02-16 07:43

Based on @tobiasahlin talk at WebExpo.

Safari flickering issue fix best solution is

transform: translateZ(0);

0人赞添加讨论(0) 举报

1 2 下一页

How to fix flicker when using Webkit transforms &

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间