原生全屏模式下的视频元素 - SAFARI

Question

此错误仅出现在 Mac OS 上的 Safari 中，并且仅出现在我们应用程序中的当前设置中。最初我认为这是一个 z-index 问题，因为某些元素在更新该值后消失了。

虽然最后一个元素没有 z-index 值，但它始终显示在全屏视频的顶部。

--见下图--

我已经尝试从您在屏幕上看到的栏中删除所有样式，但它仍会出现在视频顶部。

--见下图--

如您所见，栏内的元素仍然可见。

我无法在 codepen.io 或 jsfiddle 上重现该问题，目前在 Whosebug 或 GitHub.

中没有可用的内容

Answer 1

解决方案：

从容器中删除 will-change 属性 解决了问题。

描述

导致此问题的原因是 属性 will-change 设置为此视频元素的容器之一。

应用程序的结构非常复杂，因此我不会在此处 post 整个代码。虽然通过在检查器中移动视频元素并每次测试全屏功能，我将问题缩小到一个 div 具有此 属性.

的容器

如果你们发现 Safari 默认全屏功能因 will-change 属性、post 的评论或回答而崩溃的确切原因将不胜感激。

Answer 2

我的申请遇到了类似的问题。 Web 元素是重叠的全屏视频。仅在 Mac OS 上影响 Safari。我还假设这是 Safari 特有的 z-index 问题，最初尝试在检测到全屏模式时修改 z-index。感谢 Guilio G. 上面的评论，通过删除父 <div>.

的 -webkit-backdrop-filter:blur(3px); 解决了这个问题

与 Guilio G. 一样，我还不知道为什么，但是这个 -webkit 声明导致了问题，删除它解决了问题。