Я работаю над созданием пользовательского видеоплеера, я разработал полноэкранный режим, когда плеер масштабируется, чтобы соответствовать экрану в полноэкранном режиме. Но эта функция появилась, когда появилось новое обновление Chrome. Он по-прежнему работает в Chrome версии 65. Ниже приведена ссылка на скрипт, где я пытался воспроизвести ошибку.
https://jsfiddle.net/dhwanilshah/0j31px2v/20/
Плеер div не масштабируется, как весы контейнера, которые раньше случались.
// Scale to fit the screen, this scales the parent but not the children
function callFullScreen () {
var el = document.getElementById('main-video-container')
// Scaling parameters are calculated based on the screen sizes of the device to best fit the screen
el.style.transform = 'scale(1.5, 1.5)'
// Supports most browsers and their versions.
const requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen
if (requestMethod) { // Native full screen.
requestMethod.call(el)
}
}
Я тестировал эту функцию, и тот же код работает в Chrome версии 65, а не в Chrome версии 69.
Любые предложения приветствуются и ценятся!
Заранее спасибо!
Используя инструменты браузера dev, довольно легко понять, откуда это взялось. Перейдите в полноэкранный режим, осмотрите элемент - и вы увидите это transform: scale(1.5, 1.5);
вычеркивается в панели "Стили".
Посмотрите дальше, чтобы увидеть, какие стили применяются, и вы обнаружите, что есть правило из таблицы стилей браузера, с селектором :not(:root):-webkit-full-screen
который явно устанавливает transform: none !important;
(и значения для многих других свойств с! важно тоже).
Простейшим обходным решением здесь было бы то, что вы не применяете преобразование к элементу, который вы делаете "полноэкранным", а к дочернему элементу внутри него. Тогда селектор :not(:root):-webkit-full-screen
больше не будет соответствовать.
transform: scale(1.5, 1.5);
перечеркнут на панели «Стили». Посмотрите дальше вниз, чтобы увидеть, какие стили применяются, и вы обнаружите, что из таблицы стилей браузера есть правило с селектором:not(:root):-webkit-full-screen
который явно устанавливаетtransform: none !important;
(и значения для многих других свойств с! важным тоже.)