Element iframe znika bez wyraźnego powodu po dynamicznym utworzeniu.

Question

Jest to dość trudne do wytłumaczenia, ale nigdy wcześniej czegoś takiego nie doświadczyłem. Stworzyłem też GIF-a, by wyświetlić, jak wygląda ten problem.

Po raz pierwszy otwieram rozszerzenie chrome i szukam iframe działa idealnie dobrze. Za drugim razem, gdy otworzę rozszerzenie chrome i wykonam wyszukiwanie, element iframe zniknie (zobacz GIF).

Jak widać iframe znika nagle bez wyraźnego powodu, a jeśli ja prawym przyciskiem myszy i przejdź do inspect element i edytować nawet najbardziej niepowiązanych element potem nagle pojawia iframe.

Czy istnieje proste rozwiązanie, które mogę wypróbować? Jak już wspomniałem, kiedy przełączam dowolny fragment kodu w widoku chrome, pojawia się on ponownie.

Oto kod do poszukiwań: (używam jQuery autouzupełniania dla wyszukiwania)

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

wszelkie myśli/pomysły? Bardzo to doceniam.

Answer 1

Cytowanie John Winkelman's post:

Jest to znany problem dla przeglądarek Webkit (Chrome, Safari). Czasami, podczas aktualizowania elementu lub stylu inline, przeglądarka nie przerysowuje/nie odświeża ekranu, dopóki w DOM nie nastąpi zmiana na poziomie bloku. Ten błąd najczęściej występuje, gdy istnieje wiele dzieje się na stronie [...]

• Fix 1:

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

• Fix 2 w przypadku, gdy element nie jest odmalowane podczas przewijania strony:

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

  przypadek ten był niedawno fixed w Chrome/Chromium.