ipad - ipad のスケーリングされた (またはトグル表示) html5 ビデオが表示されない

Question

<video  width="910" height="544" controls>
    <source src="resources/videos/movie1.mp4" type="video/mp4">
</video>

最初は非表示にする必要がある HTML5 ビデオがあるので、スケールアップするために Webkit トランジションを試しました。

vidWrapper {
    -webkit-transition: all .5s ease-in-out;
    -webkit-transform: scale(0); 
} 

    .vidWrapper.active {
        -webkit-transform: scale(1);

また、ビデオを拡大するために使用する .js コードもここにあります。ビデオを表示した後、dom がスケールアップする前にキャッチする必要があるように見えるため、タイムアウトを使用する必要がありました。

setTimeout(function(){
                 debugger;
                 scope.m_vidWrapper.addCls('active');
            },200,scope)

**setTimeout を削除して、scope.m_vidWrapper.addCls('active'); を呼び出す場合は注意してください。トランジションを開始するには、ビデオが表示されます。0から1にうまくスケールアップしない

、これは Chrome と Safari では機能しますが、ipad では機能しません。また、表示をなしからブロックに切り替えてみましたが、それでも表示されません。表示しようとしているページを離れると、ビデオが表示されて点滅する場所を見たことがあります。

Answer 1

回避策として、スケールの初期値を 0 ではなく 0.1 に設定しました。