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

Question

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

我第一次打开我的chrome扩展并进行搜索时,iframe的工作完全正常.第二次打开我的Chrome扩展程序并进行搜索时,iframe消失了(请参阅GIF).

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

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

这是搜索的代码:(我正在使用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

引用约翰·温克尔曼的帖子：

这是 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 中得到了修复。