Я столкнулся с очень интересной кросс-браузерной проблемой HTML5 / CSS: всякий раз, когда есть анимация WITH-webkit-animation-fill-mode: both; прикреплен к DIV, содержащему HTML5video Элемент, это видео не будет заполнять все окно в собственном полноэкранном режиме HTML5, то есть размер видео в полноэкранном режиме будет ограничен размерами родительского элемента.

Описание может сбивать с толку, поэтому я создал упрощенный пример:http://jsfiddle.net/7SsPa/3/embedded/result/

(примечание: jsFiddle вообще не разрешает полноэкранный режим, но дает понимание того, что происходит. Чтобы увидеть тот же код с полноэкранным включением, вы можете открыть его здесь:https://dl.dropboxusercontent.com/u/3635046/fullscreen.html)

Мы попробовали несколько проигрывателей JS-video (video.js, flowplayer и т. Д.), И проблема присутствует со всеми из них и не относится к какой-либо конкретной библиотеке JS.

Чтобы упростить задачу, этот код будет работать только в браузерах webkit, но в Firefox у меня такое же поведение. Странность выходит за рамки видео измерений. На реальном веб-сайте мы наблюдали проблемы с z-index и другими элементами страницы, то есть полноэкранный режим вообще не был полноэкранным. Также обратите внимание, что анимация в примере является примитивной только для простоты.

Удаление-webkit-animation-fill-mode решает все Я не уверен, что это ошибка или какое-то неясное поведение HTML / CSS, которое я не могу понять, но вопрос таков:

Есть ли способ добиться правильного полноэкранного режима и сохранить атрибут -webkit-animation-fill-mode? Вероятно, можно удалить класс .animated через JS при полноэкранной активации, но я ищу более чистое решение. Примечание: содержащий элемент имеет определенные размеры (это модальное окно), имеет поля и окружен другими элементами, то есть мы не можем просто установить его ширину / высоту равными 100%.

Спасибо.