The development journey for eGravity’s own animated website was a long but educational one, and we encountered many bugs along the way. This particular bug however isn’t very well documented online, so I decided to document it here and save any developer who might stumble across this post a future headache.
Display issues occur in numerous browsers when launching full-screen media such as HTML5 video from a container that is keyframe animated. The CSS code below fixes this issue by forcing browsers to set the animation-fill-mode property of all ancestors to a value of none, whilst full-screen content is active.
:-moz-full-screen-ancestor{
-webkit-animation-fill-mode: none!important;
animation-fill-mode: none!important;
}
:-webkit-full-screen-ancestor:not(iframe) {
-webkit-animation-fill-mode: none!important;
animation-fill-mode: none!important;
}
If this didn’t solve your particular problem, feel free to contact us. We’re always happy to help!