7

以下のコード ( JSFiddle Preview ) は、他の最新のブラウザーと比較して、Webkit で予期しない結果を生成します。

<script type="text/javascript">
jQuery(document).ready(function($) {
    RunFunction();

    $('.ColorSquare').click(function() {
        $('#Lightbox').css('display','block');
        $('#ShowColorSquare').css('display','block');
        $('#ShowColorSquare').css('z-index','10');
        $('#ShowColorSquare').css('left',$('#ShowColorSquare').parent().width() / 2 - 50);
        $('#ShowColorSquare').css('top',$('#ShowColorSquare').parent().height() / 2 - 50);
        $('#ShowColorSquare').html('The color is: ' + $(this).css('background-color'));
    });
    $('#ShowColorSquare').click(function() {
        $('#Lightbox').css('display','none');
        $('#ShowColorSquare').css('display','none');
        $('#ShowColorSquare').html('');
    });
    $('#Lightbox').click(function() {
        $('#Lightbox').css('display','none');
        $('#ShowColorSquare').css('display','none');
        $('#ShowColorSquare').html('');
    });
});
function RunFunction() {
    $('#slide1').animate({
        left: '-=310'
    }, 3000);
    $('#slide2').animate({
        left: '-=310'
    }, 3000);
    $('#slide3').animate({
        left: '-=310'
    }, 3000, function() {
        if($('#slide1').css("left") == '-310px') {
            $('#slide1').css("left",620);
        }
        if($('#slide2').css("left") == '-310px') {
            $('#slide2').css("left",620);
        }
        if($('#slide3').css("left") == '-310px') {
            $('#slide3').css("left",620);
        }   
        RunFunction(); 
    });
}
</script>
<style>
#Spin {
    width:50px;
    height:50px;
    margin: 15px 0px 15px 15px;
    background-color:#960;
    animation-name:Spin;
    animation-duration:5s;
    transform-origin:50% 50%;
    animation-iteration-count:infinite;

    -webkit-animation-name:Spin;
    -webkit-animation-duration:5s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count:infinite;
}
@keyframes Spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes Spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
.ColorSquare {
    height:100px;
    width:100px;
    position:absolute;
}
#ShowColorSquare {
    height:100px;
    width:100px;
    position:absolute;
    background-color:white;
    display:none;
}
#Lightbox {
    background-color:#000;
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    opacity:.8;
    display:none;
    z-index:5;
}
.Panel {
    width:225px;
    height:250px;
    position:absolute;
    background-color:#6C6C6C;
}
</style>

<div id="Spin"></div>

<div style="height:260px;width:500px;overflow-x:hidden;background:#CCC;">
    <div style="height:250px;width:500px;position:relative;">
        <div id="slide1" class="Panel" style="top:0px;left:0px;">
            <div>Slide 1</div>
            <div style="position:relative;margin-top:10px;width:225px;height:200px;">
                <div class="ColorSquare" style="background-color:#093;left:0px;top:0px;"></div>
                <div class="ColorSquare" style="background-color:#C9F;left:100px;top:100px;"></div>
            </div>
        </div>
        <div id="slide2" class="Panel" style="top:0px;left:310px;">
            <div>Slide 2</div>
            <div style="position:relative;margin-top:10px;width:225px;height:200px;">
                <div class="ColorSquare" style="background-color:#CF9;left:0px;top:0px;"></div>
                <div class="ColorSquare" style="background-color:#C63;left:100px;top:100px;"></div>
            </div>
        </div>
        <div id="slide3" class="Panel" style="top:0px;left:620px;">
            <div>Slide 3</div>
            <div style="position:relative;margin-top:10px;width:225px;height:200px;">
                <div class="ColorSquare" style="background-color:#696;left:0px;top:0px;"></div>
                <div class="ColorSquare" style="background-color:#F96;left:100px;top:100px;"></div>
            </div>
        </div>
        <div id="ShowColorSquare"></div>
    </div>
</div>
<div id="Lightbox"></div>

期待される結果: 3 つの DIV (スライド) が、スライド内の色分けされたボックスを含め、ループ内で左に連続的にアニメーション化されるはずです。色付きのボックスをクリックすると、該当するスライド内でクリックされた色付きのボックスの RBG カラーでライトボックスが表示されます。もう一度クリックしてライトボックスを閉じます。ライト グレーの親 DIV の前に 3D 変換が適用され、オーバーフローが非表示の相対的な位置、スライド DIV の絶対配置での Jquery animate が適用されます。

Webkit の結果: スライド内の色付きのボックスは、デスクトップでブラウザー ウィンドウのサイズを変更するか、タブレットで JSFiddle パネルのサイズ変更ハンドル (またはピンチ/ズーム) をクリックするまで、まったく移動/レンダリングされないように見えます。別のデバッグ ノートでは、3D 変換アニメーションがループしていない場合、アニメーションが停止すると、DIV は期待どおりにレンダリングされます。

Webkit のバグを示すテスト結果:

  • Win7 IE10: 合格
  • Win7 Chrome: 合格
  • Win7 FF: パス
  • Win7 Safari: 失敗
  • Win8 IE11: 合格
  • Android Chrome: 失敗
  • iOS Safari: 失敗
  • iOS Chrome: 失敗
  • MacOS Safari: 失敗
  • MacOS Chrome: 失敗

( JSFiddle Preview ) 3D 変換がないと、コードは機能しますが、アニメーションはデスクトップでは滑らかではありません。ライトボックスは正常に動作します。

親 DIV の後に 3D 変換があることに注意してください ( JSFiddle Preview )。アニメーションはスムーズで、ライトボックスは正常に動作します。

-webkit-transform: rotate(0deg)が親 DIV に適用され、オーバーフローが発生している( JSFiddle Preview )ことに注意してください。タブレットではアニメーションが途切れますが、3D 変換は親 DIV の前またはスライド DIV 内に存在する可能性があります。ただし、別の問題が発生します。親のオーバーフロー DIV は、ライトボックスよりも低い z-index を持っているため、暗いライトボックス DIV が、親 DIV 内にある白いダイアログ DIV の上に表示されます。

これが非常に奇妙な例であることは承知していますが、よりプライベートな複雑なコードの骨抜きにされた例です。3D 変換は、親 DIV の前、またはスライド内にある必要があります。ライトボックス ダイアログは親 DIV またはスライド内にある必要がありますが、暗いライトボックス DIV の上に表示されます。オーバーフローが非表示になっているため、暗いライトボックス DIV がブラウザー画面全体に表示されないため、親 DIV 内に配置することはできません。

どんな助けでも大歓迎です。

4

2 に答える 2