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 Autoplete for the search)

$('#searchBox').autoplete({
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="/'+suggestion.data+'"></iframe>');
},
lookupFilter: _autopleteLookup,
formatResult: _autopleteFormatResult, 
});

Any thoughts/ideas? Highly appreciate it.

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 Autoplete for the search)

$('#searchBox').autoplete({
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./'+suggestion.data+'"></iframe>');
},
lookupFilter: _autopleteLookup,
formatResult: _autopleteFormatResult, 
});

Any thoughts/ideas? Highly appreciate it.

• javascript
• jquery
• iframe
• google-chrome-extension
• jquery-autoplete

Share Improve this question Follow edited Feb 8, 2017 at 15:04 CommunityBot 111 silver badge asked Jul 18, 2015 at 3:28 KatieKatie 75111 gold badge1111 silver badges3030 bronze badges 10

• Any chance your iframe is getting reloaded unintentionally (like after a form submit)? – jfriend00 Commented Jul 18, 2015 at 3:39
• It might be because of you are loading to another page. – Derek 朕會功夫 Commented Jul 18, 2015 at 3:45
• @jfriend00 but that wouldn't explain why it loads the first time, but not the second... – Katie Commented Jul 18, 2015 at 4:00
• Maybe, maybe not (depends upon your code), but it is a very mon mistake that causes a page to flash and then reload so I'd suggest you check to see if this is happening. You haven't disclosed enough of the situation for us to see whether this could be happening so all I can do is ask you to check. It's simple enough to see in the network tab of the Chrome debugger if a page reload is happening due to a form submit. – jfriend00 Commented Jul 18, 2015 at 4:04
• @jfriend00 I'm not actually using a form I simply have a textbox and jquery-autoplete takes care of the rest. I also checked the chrome debugger and it doesn't seem like a reload is happening. – Katie Commented Jul 18, 2015 at 4:16

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 4

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.