Google Chrome/MS Edge version 87 affecting iFrames from being viewable?

Question

Chrome 87 and Microsoft Edge 87 updated on my computer today and now I'm seeing odd behavior when trying to view web pages embedded within our intranet through iFrames. The embedded web pages are https secured and were working totally fine on Chrome 86.

The behavior that happens is when a web page loads with an iFrame using a chromium based browser, the page will load fine. If you click on a link within the iFrame page, the content within the iFrame disappears. If you hover your mouse over the content of the iFrame, you can see the mouse pointer change into a hand when you hover over where a link must be on the page, even though you can't see any content.

Also when this behavior occurs and the content inside the iFrame is invisible, if you open Chrome Developer tools and then inspect the iFrame element, it will reappear.

Was curious if anyone has seen such behavior, or has any ideas on why content within an iFrame viewed with a chromium 87 based web browser will be invisible.

Thanks!

Answer 1

I confirm that Chrome DEV actual version works ... (is this an answer ?!?) For those who use Chrome in business (as our guests ...) this is a big problem and also a DEV version ... can be acceptable in some cases ...

Adriano Mari - Multidata Prato

Answer 2

As other users have mentioned, this seems to be a rendering bug with Chromium.

While perhaps not the most elegant solution, forcing the page to redraw after the iframe has loaded is likely the best solution until Google get's their issue sorted.

$(function() { // Temporary workaround for Chromium iframe load issue
    $('iframe').on('load', function() {
        $(this).hide(0).show(0);
    })
}) 

Answer 3

• As per chromium Bug website, Iframe blank issue observed in following versions and you get fixed starting from chrome 88.

   Issue observed in:
   Chrome 86: 86.0.4240.198
   Chrome Beta: 87.0.4280.60
  
   Issue *not* observed in:
   Chrome Dev: 88.0.4315.5
   Chrome Canary: 88.0.4324.2
   Chromium latest
  

• If security is not concern for you, you can go to chrome flag and enable exprimental web platform flag til time Chrome 88 release officially.

chrome://flags/#enable-experimental-web-platform-features

• If you have control over iframe page content, then you can add following tag inside iframe page.

  <canvas id="canvas" width="1px" height="1px"></canvas>

After the page loads, execute the following Javascript:

      window.setTimeout(function() {
          var c=document.getElementById("canvas");
          var ctx=c.getContext("2d");
          ctx.moveTo(0,0);
          ctx.lineTo(1,1);
          ctx.stroke();
      }, 200);