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.