iframe scompare senza un motivo apparente dopo averlo creato dinamicamente.

Question

Questo è abbastanza difficile da spiegare, ma non ho mai provato qualcosa di simile prima. Ho anche creato una GIF per visualizzare l'aspetto del problema.

La prima volta che apro l'estensione Chrome e faccio una ricerca, l'iframe funziona perfettamente. La seconda volta che apro la mia estensione per Chrome e faccio una ricerca, l'iframe scompare (vedi GIF).

Come si può vedere l'iframe scompare improvvisamente senza alcun motivo apparente, e se mi fate clic destro e vado in inspect element e modificare anche l'articolo più estranei poi tutto ad un tratto l'iframe riappare.

C'è una soluzione semplice che posso provare? Come ho detto quando riattivo qualsiasi parte di codice nella vista inspect element in chrome, riappare.

Ecco il codice per la ricerca: (sto usando jQuery completamento automatico per la ricerca)

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

tutti i pensieri/idee? Lo apprezzo molto.

Answer 1

Citando John Winkelman's post:

Questo è un problema noto per i browser Webkit (Chrome, Safari). A volte, quando si aggiorna un elemento o uno stile in linea, il browser non ridisegna/ridisegna lo schermo finché non avviene una modifica a livello di blocco nel DOM. Questo bug più spesso si verifica quando c'è un sacco di cose nella pagina [...]

• Fix 1:

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

• Fix 2 nel caso in cui l'elemento non viene ridisegnato durante lo scorrimento della pagina:

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

  Questo caso è stato di recente fixed in Chrome/Chromium.