iframe dinamik olarak oluşturulduktan sonra görünür bir neden olmaksızın kaybolur

Question

Bunu açıklamak oldukça zor, ama daha önce böyle bir şey yaşamamıştım. Ayrıca sorunun neye benzediğini görüntülemek için bir GIF oluşturdum.

Chrome uzantımı ilk açtığımda ve arama yaparken iframe mükemmel bir şekilde çalışıyor. İkinci kez krom uzantıyı açıp iframe aramasına bir göz atıyorum (bkz. GIF). Ben sağ tıklayıp inspect element girer ve sonra iframe yeniden görünür aniden hatta en ilgisiz öğeyi düzenlemek eğer iframe görebileceğiniz gibi

aniden hiçbir belirgin nedeni kaybolur ve.

Denediğim basit bir çözüm var mı? Kromda inspect element görünümünde herhangi bir kod parçasını değiştirdiğimde söylediğim gibi yeniden belirir. İşte

arama için kodudur:

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

Herhangi bir düşünce/fikir (Arama için jQuery otomatik kullanıyorum)? Son derece takdir ediyorum. John Winkelman's post aktaran

Answer 1

:

Bu Webkit tarayıcıları (Chrome, Safari) için bilinen bir sorundur. Bazen, bir satır içi öğeyi veya stili güncellerken, tarayıcı DOM'de blok düzeyinde bir değişiklik gerçekleşene kadar ekranı yeniden çizmez/yeniden çizmez. sayfasında oluyor çok olduğunda bu hata genellikle [...] oluşur

• Fix 1: eleman değil yoktur durumunda

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

• Fix 2 sayfa kaydırma yaparken:

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

  Bu durum son Krom/Chromium'da fixed oldu.