Question

我有一个非常简单的演示工作，它使用Webkit变换和过渡来实现'面板'（div）之间的平滑水平滚动。

我想要走这条路线而不是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;
}

Answer 1

@gargantaun是对的，如果你要动画的元素大于屏幕，Webkit会闪烁。但是有一个简单的解决方法。只需添加：

-webkit-backface-visibility: hidden;

到元素，你很高兴！

Answer 2

尝试使用translate3d而不是translateX。看起来只有translate3d在iPad 3.2上是硬件加速的。

Answer 3

如上所述，最好使用Translate3d，因为硬件加速可以实现更平滑的过渡。

但是，当动画的div大于屏幕时会引起闪烁。所以，如果你有一个区域，你希望水平转换的屏幕宽度最多为3.5，那么它应该分成4个这样的div

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

所有div都不应超过屏幕高度或宽度。

对于发布此答案的迟到感到抱歉。在我得到一个“热门问题”通知之前，我完全忘记了它。

Answer 4

首先让视图处于“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"));

Answer 5

如今，使用iOS8，另一个好的解决方案是将overflow: hidden应用于有罪的元素（或其容器）。

Answer 6

基于WebExpo上的@tobiasahlin演讲。

Safari闪烁问题修复最佳解决方案是

transform: translateZ(0);

Answer 7

我发现，与对left：或right：类进行动画处理相比，translate3D是更好的解决方案。它在Safari上效果很好，也更流畅。即使在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);
  }
}

如何在使用Webkit转换时修复闪烁＆amp;过渡

7 个答案: