iframe disappears for no apparent reason after dynamically creating it

Question

This is quite difficult to explain, but I've never experienced something like this before. I've also created a GIF to display what the issue looks like.

The first time I open my chrome extension and make a search the iframe works perfectly fine. The second time I open my chrome extension and make a search the iframe disappears (see GIF).

As you can see the iframe suddenly disappears for no apparent reason, and if I right click and go into inspect element and edit even the most unrelated item then all of a sudden the iframe reappears.

Is there a simple solution I can try? As I said when I toggle any piece of code in the inspect element view in chrome it reappears.

Here is the code for searching: (I'm using jquery Autocomplete for the search)

$('#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, 
});

Any thoughts/ideas? Highly appreciate it.

Answer 1

Quoting John Winkelman's post:

This is a Known Issue for Webkit browsers (Chrome, Safari). Sometimes, when updating an inline element or style, the browser does not redraw/repaint the screen until a block-level change happens in the DOM. This bug most often occurs when there is a lot going on in the page [...]

• Fix 1:

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

• Fix 2 in case the element isn't repainted when scrolling the page:

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

  This case was recently fixed in Chrome/Chromium.