web-dev-qa-db-ja.com

Webkitの変換と遷移を使用するときにちらつきを修正する方法

私は、「パネル」（div）間のスムーズな水平スクロールのためにWebkit変換と遷移を使用する非常にシンプルなデモを行っています。

JavaScript駆動のシステムとは対照的にこの方法を使用したい理由は、iPadとJavaScriptのパフォーマンスがかなり悪いためですが、CSSの変換と遷移はシルクのようにスムーズです。悲しいことに、デモを使ってiPadでちらつきがたくさん出ます。

あなたは見ることができます ここのデモ

動作を確認するには、Safariまたは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;
}
htmlcsssafariwebkit
19
gargantuan

@gargantaunは正解です。アニメーション化する要素が画面よりも大きい場合、Webkitはちらつきます。しかし、簡単な修正があります。追加するだけです：

-webkit-backface-visibility: hidden;

要素に、あなたは行ってもいいです！

45
Mario Uher

上記のように、スムーズな移行を可能にするハードウェアアクセラレーションのため、Translate3dを使用する方が適切です。

ただし、アニメーション化されているdivが画面より大きい場合、ちらつきが発生します。したがって、水平に遷移させたい画面の幅が最大3.5になる領域がある場合は、次のように4つのdivに分割する必要があります。

[1] [2] [3] [。5]

どのdivも画面の高さまたは幅を超えることはできません。

この回答の投稿が遅れて申し訳ありません。 「人気の質問」の通知を受け取るまで、私はそれを完全に忘れていました。

5
gargantuan

現在、iOS8では、overflow: hiddenを対象の要素（またはそれらのコンテナー）に適用することが別の優れたソリューションです。

1
Francesco Frapporti

@ tobiasahlin に基づくWebExpoでの講演。

Safariのちらつきの問題を修正する最良の解決策は

transform: translateZ(0);
1
Adam Šír

最初にビューを「3D」状態にして、ちらつきをなくしました。まず、すべてのビューに保存3Dをオンにします。それから私はこのコードを持っています、

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

次に、Webkitアニメーションを実行する前に初期化します。

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

Translate3Dは、left：またはright：クラスをアニメーション化するよりも優れたソリューションであることがわかりました。それはサファリでうまく機能し、よりスムーズです。 iOS13でも大きなちらつきの問題がありました。

これはスライドアウトです：

.cartout-enter-active {
  -webkit-animation: cartout 0.2s;
  animation: cartout 0.2s;
}
.cartout-leave-active {
  -webkit-animation: cartout 0.2s reverse;
  animation: cartout 0.15s reverse;
}
@-webkit-keyframes cartout {
  from {
    transform: translate3d(100%, 0, 0);
  }

  to {
    transform: translate3d(0%, 0, 0);
  }
}
0
learncodes123