iframe verschwindet ohne ersichtlichen Grund nach der dynamischen Erstellung

Question

Das ist ziemlich schwierig zu erklären, aber ich habe noch nie so etwas erlebt. Ich habe auch ein GIF erstellt, um anzuzeigen, wie das Problem aussieht.

Das erste Mal, wenn ich meine Chrome-Erweiterung öffne und eine Suche mache, funktioniert der iFrame einwandfrei. Das zweite Mal, wenn ich meine Chrome-Erweiterung öffne und eine Suche mache, verschwindet der Iframe (siehe GIF).

Wenn Sie die Iframe sehen können ohne ersichtlichen Grund plötzlich verschwindet, und wenn ich nach rechts und in inspect element gehen klicken und selbst die nicht verwandten Artikel bearbeiten dann ganz plötzlich die iframe erscheint.

Gibt es eine einfache Lösung, die ich versuchen kann? Wie ich schon sagte, wenn ich irgendein Stück Code in der inspect element Ansicht in Chrom umschalte, erscheint es wieder. Hier

ist der Code für die Suche: (Ich bin mit jquery automatische Vervollständigung für die Suche)

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

Irgendwelche Gedanken/Ideen? Ich schätze es sehr.

Answer 1

Zitiert John Winkelman's post:

Dies ist ein bekanntes Problem für Webkit-Browser (Chrome, Safari). Wenn ein Inline-Element oder -Stil aktualisiert wird, zeichnet der Browser den Bildschirm manchmal erst neu/neu, wenn eine Änderung auf Blockebene im DOM auftritt. Dieser Fehler tritt am häufigsten, wenn eine Menge gibt es auf der Seite geht [...]

• Fix 1:

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

• Fix 2, falls das Element nicht neu lackiert wenn die Seite scrollen:

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

  Dieser Fall war vor kurzem fixed in Chrome/Chromium.