iframe在动态创建后没有明显原因消失

Question

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

我第一次打开Chrome扩展程序并进行搜索时iframe工作正常。第二次打开我的Chrome扩展程序并进行搜索时，iframe消失了（请参阅GIF）。

正如您所看到的，iframe突然消失，没有明显的原因，如果我右键单击并进入inspect element并编辑最无关的项目，那么突然之后iframe重新出现。

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

以下是搜索的代码:(我正在使用jquery自动完成功能进行搜索）

$('#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。