带有浮动的 iframe 在 Chrome 中消失答案

【问题标题】：iframe with float disappearing in Chrome带有浮动的 iframe 在 Chrome 中消失
【发布时间】：2017-08-26 11:49:30
【问题描述】：

我有一个使用 iframe 从 Archive.org 加载音频播放器的网站。该网站已运行良好三年。但是，当我昨天将 Chrome 升级到 60 版时，iframe 会立即显示然后消失。该网站在其他浏览器中仍然可以正常运行。

例如，页面http://gratefuldeadoftheday.com/02-13-1970 具有以下 iframe：

<iframe class="archive-l" frameborder="0" height="400" 
src="https://archive.org/embed/gd1970-02-13.sbd.miller.fix-
97613.97639.sbeok.flac16&amp;playlist=1" width="300"></iframe>

archive-l 类包括一个 float:left。如果我删除 float: left，iframe 会在 Chrome 中呈现。而且，如果我删除浮动，将 iframe 包装在 div 中，然后浮动 div，iframe 就会呈现。你可以看到我在这里做到了：http://gratefuldeadoftheday.com/08-26-1971

显然，我可以将所有 2000 多个页面上的 iframe 包装在一个 div 中并让它工作，但我仍然想了解为什么会出现这个问题。

【问题讨论】：

我在 Chrome 60 中看到的唯一问题是 iframe 的宽度...
@Alessio 为什么宽度有问题？
我看到内容被剪掉了
@Alessio 我明白你在 02-13-1970 页面上所说的内容。但这不会导致问题。如您所见，其他页面中的 iframe - 例如gratefuldeadoftheday.com/08-20-1983 - 内容没有被截断仍然消失。
我明白了，您是否尝试过为 iframe 设置宽度？

标签： html css google-chrome iframe

【解决方案1】：

我发现了一个肮脏的解决方法：您应该在 iframe 上触发宽度更改/调整大小。

试试：

jQuery('.field__item iframe').css('width','auto');

【讨论】：

如果有帮助，请批准答案并点赞；）谢谢
我很欣赏这个解决方法。但是您没有回答我关于导致问题的原因的问题。
对于遇到此问题的任何人，上述 JQuery 解决方法似乎只使 iframe 可见，直到用户单击 iframe 中的某些内容。点击 iframe 后，内容又消失了。
@kosher 但该解决方法在点击时不起作用，您应该在 iframe 完成加载后运行它。例如，如果我在页面完全加载后在控制台中运行它，则 iframe 始终保持可见。也许您在页面完全加载之前运行它？

【解决方案2】：

加载后浮动 iframe 消失似乎是 Chrome 60 版中的一个已知问题。该问题已在 61 版中得到修复。 You can see more about this here 和 here。

【讨论】：