自定义视频播放器的全屏功能在更新到 Chrome 版本 69 后损坏，可能导致此问题的更改有哪些？

Question

我一直致力于制作自定义视频播放器，我开发了一种全屏模式，播放器可以在全屏模式下缩放以适应屏幕。但是，此功能在 Chrome 的新更新发布时失效。它仍在 Chrome 版本 65 上工作。以下是 link 到 fiddle 我试图复制错误的地方。

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。

欢迎提出任何建议，我们将不胜感激！

提前致谢！

Answer 1

使用浏览器开发工具，很容易找出它的来源。进入全屏模式，检查元素 - 您会看到 transform: scale(1.5, 1.5); 在样式面板中被划掉。

再往下看应用了哪些样式，您会发现浏览器样式表中有一条规则，其中选择器 :not(:root):-webkit-full-screen 显式设置 transform: none !important;（以及很多值!important 的其他属性。)

这里最简单的解决方法是您不将转换应用到您正在“制作”全屏的元素，而是应用到其中的子元素。然后选择器 :not(:root):-webkit-full-screen 将不再匹配。

自定义视频播放器的全屏功能在更新到 Chrome 版本 69 后损坏，可能导致此问题的更改有哪些？

Fullscreen feature for custom video player broke after updating to Chrome Version 69, what are the changes which can cause this?

javascript

css

google-chrome

fullscreen