如何处理 vimeo iframe 和定位固定元素？答案

【问题标题】：How to deal with vimeo iframe and position fixed elements?如何处理 vimeo iframe 和定位固定元素？
【发布时间】：2013-04-20 12:50:35
【问题描述】：

我的网站：dwapotwory.com 使用嵌入 vimeo 视频。在 Safari (Mac) 和 Chrome（Win/Mac）上，当 iframe 加载时，每个具有 position: fixed 的元素（标题和左/右按钮 div）都会崩溃。

在 Safari 中没有 iframe 一切都很好：http://dwapotwory.com/1.html

在 Safari 中使用 iframe...：http://dwapotwory.com/2.html

我将 iframe 包裹在 div 中，并在缩放浏览器窗口时设置为缩放，但这并没有导致问题（我尝试了一些响应式嵌入 vimeo 解决方案，但没有任何区别）。

【问题讨论】：

我有类似的事情发生，只在带有视频标签的 Safari（桌面）上。基本上所有元素 before 视频标签都是绝对的，因为那些 after 被正确定位（固定）。在我的例子中，父元素是固定的，子元素是绝对的。

【解决方案1】：

所以我遇到了这个问题，因为我对视频（只是video 标签，而不是实际的iframes 等）和固定位置的容器也有类似的问题。

Safari 问题似乎很随机，在我的情况下，我通过将 -webkit-transforms 添加到固定容器来修复它，但在你的情况下，它显然可以通过将 z-index 设置为绝对容器来解决框架，我尝试直接在检查器中操作你的 DOM，它似乎工作。

【讨论】：