iAd Producer 3：アニメーションの適用後に、ビデオ要素または埋め込みマップのタッチイベントが無視される場合がある

アニメーションの適用後に、ビデオ要素と埋め込みマップのタッチイベントが無視される場合があります。

この問題が発生するのは、CSS アニメーションを使ってビデオやマップに transform アニメーションの適用を試みた場合です。これらの要素に transform アニメーションを適用すると、アニメーションが完了するまでタッチイベントに反応しなくなります。アニメーションで「-webkit-animation-fill-mode: forwards」が指定されている場合は、アニメーションが完了した後もタッチイベントに反応しません。

fill-mode に forwards を指定しない形に CSS を構成し直してください。たとえば、次のようなコードが考えられます。

video {

left: 0px;

-webkit-animation-name: slide-in;

-webkit-animation-duration: 2s;

}

@-webkit-keyframes slide-in {

from { -webkit-transform: translate3d(-320px, 0, 0); }

to { -webkit-transform: translate3d(0, 0, 0); }

}

このテクニックを使うと、ビデオが最終的な位置に配置された後、アニメーションの最初のキーフレームで画面の外に移動します。アニメーションの最後のキーフレームは恒等変換にすぎないため、fill プロパティは必要ありません。

上記の方法で CSS を構成し直すことができない場合は、代替のテクニックとして、JavaScript を使ってアニメーションの「webkitAnimationEnd」イベントをリスンし、適用先の要素の最終的な位置を明示的に設定することができます。