Я столкнулся с очень интересной кросс-браузерной проблемой 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%.

Спасибо.