google-chrome - 嵌入视频时 overflow hidden 的 Google Chrome 问题 (youtube/vimeo)

Question

我在 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 embeds = 同样的问题)。这似乎是他们网站上的错误。

你有什么解决方法吗？

Answer 1

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