嵌入视频时隐藏的 Google Chrome 浏览器溢出问题 (youtube/vimeo)答案

【问题标题】：Google Chrome issue on overflow hidden when embedding video (youtube/vimeo)嵌入视频时隐藏的 Google Chrome 浏览器溢出问题 (youtube/vimeo)
【发布时间】：2018-03-20 10:44:55
【问题描述】：

我在 google chrome 上遇到了一个奇怪的问题，这似乎是新问题，因为我很确定它以前可以工作（在旧版本上）。

.container {
  width: 400px;
  height: 266px;
  overflow: hidden;
  position: relative;
  border: 2px solid red;
  margin-bottom: 30px;
}

iframe {
  position: absolute;
  width: 480px; 
  height: 350px; 
  top: 50%; 
  left: 50%; 
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
  overflow:hidden;
}

<div class="container">
  <iframe src="https://www.youtube.com/embed/Bm8N_pf7LuU" frameborder="0"></iframe>
</div>

<div class="container">
  <iframe src="https://codepen.io/" frameborder="0"</iframe>
</div>

您会看到第一个容器包含一个 youtube iframe，并且比容器大，但使用 overflow:hidden 它不应该在网站上可见和“剪切”。但是谷歌浏览器不能再这样做了（所有其他浏览器都可以正常工作）。第二个容器只包含一个普通页面，隐藏的溢出效果很好，所以我猜它与视频嵌入有某种关系（vimeo 嵌入=相同的问题）。这似乎是他们网站的一个错误。

你有什么解决方法吗？

【问题讨论】：

我自己使用了一个带有溢出的包装器：隐藏在 iframe 周围。最近也停止工作（我假设今天或昨天）。在其他浏览器中也可以正常工作。
接触chrome后，好像是他们网站的bug。
我在使用溢出的包装器时遇到了同样的问题：隐藏在 iframe 周围。它只在 Chrome 中被破坏，而且是最近的。真的需要解决这个问题。

标签： google-chrome iframe youtube overflow vimeo

【解决方案1】：

Chrome 溢出问题已解决。谷歌修复了它

【讨论】：

这是什么时候？您能否链接到引用此内容的来源？作为最终用户，我们如何整合此修复程序？
我没有来源或发布日期。正如 Benmay 所说，这是一个 chrome 错误。
Chrome releases patch notes。我更感兴趣的是提供一个已修复的特定版本号，以便以后阅读本文的人可以检查他们的版本是否等于或高于修复版本。

【解决方案2】：

我今天将我的谷歌浏览器更新到版本 66.0.3359.117 并且错误已解决。

jsfiddle with your example

【讨论】：