iAd Producer 3: Touch events on video elements and embedded maps may be ignored after applying animation

Touch events on video elements and embedded maps can be ignored after you apply an animation

The issue occurs when attempting to apply a transform animation to a video or map using a CSS animation. If a transform animation is applied to one of these elements, it will not respond to touch events until the animation is complete. If the animation uses "-webkit-animation-fill-mode: forwards", it will not respond to touch events even after the animation has completed.

Restructure your CSS so that a forward fill is not required. See the code below for an example.

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); }

}

Using this technique, the video is positioned at its final resting place, then moved off-screen with the first keyframe of the animation. Since the final keyframe of the animation is just an identity transform, no filling is required.

If restructuring your CSS in this manner is not possible, an alternative technique is to use JavaScript to listen for the animation's "webkitAnimationEnd" event, then explicitly set the element's final position.