Question

我在谷歌浏览器上遇到了一个奇怪的问题，这似乎是新的，因为我很确定它之前有效（在旧版本上）。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

你有解决方法吗？

Answer 1

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

Answer 2

我今天将Google Chrome更新为版本66.0.3359.117，错误已解决。

jsfiddle with your example

嵌入视频时隐藏的Google Chrome浏览器问题隐藏（youtube / vimeo）

2 个答案: