iframe 在动态创建后无故消失

Question

这很难解释，但我以前从未经历过这样的事情。我还创建了一个 GIF 来显示问题的样子。

我第一次打开我的 chrome 扩展并进行搜索时，iframe 工作得非常好。第二次打开我的 chrome 扩展并进行搜索时，iframe 消失了（参见 GIF）。

如您所见，iframe 突然无缘无故消失了，如果我右键单击并进入 inspect element 并编辑最不相关的项目，然后 iframe 突然重新出现。

我可以尝试一个简单的解决方案吗？正如我所说，当我在 chrome 中切换 inspect element 视图中的任何代码时，它会重新出现。

这是搜索的代码：（我正在使用 jquery Autocomplete 进行搜索）

$('#searchBox').autocomplete({
lookup: footballers,
lookupLimit: 5,
minChars: 3,
onSelect: function (suggestion) {
    $("#searchBox").blur();     
    $('.fullcard').css('display', 'block');
    $('.fullcard').append('<i id="closeCard" class="material-icons">close</i><iframe src="https://www.example.com/'+suggestion.data+'"></iframe>');
},
lookupFilter: _autocompleteLookup,
formatResult: _autocompleteFormatResult, 
});

有什么想法/想法吗？非常感谢。

Answer 1

引用John Winkelman's post:

这是 Webkit 浏览器（Chrome、Safari）的一个已知问题。有时，当更新内联元素或样式时，浏览器不会重绘/重绘屏幕，直到 DOM 中发生块级更改。当页面中有很多事情发生时，这个错误最常发生 [...]

• 修复 1：

  document.getElementById('myElement').style.webkitTransform = 'scale(1)';
  

• 修复2，以防滚动页面时不重新绘制元素：

  document.addEventListener("scroll", function(event) {
      var style = document.getElementById("name").style;
      style.webkitTransform = style.webkitTransform ? "" : "scale(1)";
  });
  

  此案例最近在 Chrome/Chromium 中为 fixed。