4

I came across a weird issue on google chrome which seems to be new because I'm pretty sure it worked before (on older version).

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

You see that the first container contains a youtube iframe and is bigger than the container, but with overflow:hidden it shouldn't be visible and 'cutted' on the sites. But google chrome is not able to do this anymore (all other browsers works fine). The second container just contains a normal page and there the hidden overflow works well, so I guess it's somehow related to video embeds (vimeo embeds = the same issue). It seems like a bug from their site.

Do you have any workaround for this?

Nathan Smith
  • 683
  • 1
  • 10
  • 24
Benmay
  • 347
  • 1
  • 15
  • 1
    I use a wrapper with overflow:hidden around an iframe myself. Also stopped to work recently (i assume today or yesterday). Works fine in other browsers too. – user1765065 Mar 21 '18 at 09:34
  • After bein in contact with chrome, it seems that it is a bug on their site. – Benmay Mar 22 '18 at 08:09
  • I'm having the same problem with a wrapper with overflow:hidden around an iframe. It's only broken in Chrome and it's very recent. Really need a solution to this. – Tamara Mar 22 '18 at 17:56

2 Answers2

1

The Chrome overflow problem is resolved. Google fixed it

Kevin Ashley
  • 11
  • 2
  • 3
    When was this? Can you please link to a source citing this? How do we as end users incorporate this fix? – Nathan Smith Apr 23 '18 at 20:10
  • I don't have a source or release date. As Benmay stated, this was a chrome bug. – Kevin Ashley Apr 24 '18 at 20:57
  • [Chrome releases patch notes](https://chromereleases.googleblog.com/). I'm more interested in providing a specific version number it was fixed so future people reading this can check if their version is at or greater than the fix version. – Nathan Smith Apr 24 '18 at 22:04
0

I updated today my Google Chrome to version 66.0.3359.117 and the bug was resolved.

jsfiddle with your example

André Felicio
  • 16
  • 2