Can not use IFrame after upgrading the Chrome browser to version 103.0.5060.114 (Official Build) (arm64)

JupyterLab
1

Jupyter Lab environment freezes after executing a notebook that contains a cell with an IFrame pointing to an external https domain.

  • It happens in the Chrome Version 103.0.5060.114 with Arm64 architecture and using a Arm64 python architecture.
  • It works ok with Safari, Firefox. It also works in previous Chrome versions (e.g. 102.0.5005.63 and 101.0.4951.64). It also works in Chrome 103.0.5060.114 but only when running JupyterLab in a Conda environment with python 3.7 (intel emulation).
  • It seems to be a Chrome 103/Arm64 combination.

Steps to reproduce:
1.- Create a new notebook and codify it as follows:

[1] from IPython.display import IFrame
[2] display(IFrame('https://chartfactor.com', 800, 1000))

2.- Try to create a new notebook by clicking on the New Launcher (+) button next to the current notebook tab.

Actual: The entire page is frozen and I can not switch notebook tabs anymore. Menus, context menu, buttons etc don’t work.
Expected: Everything should work as expected.

Take a look at the following gif to help you recreate the issue:

ezgif.com-gif-maker (1)

Thanks in advance for the help!

2

I recently updated my Chrome with the latest version they released which is 103.0.5060.134 and it still doesn’t work, any suggestions?

3

As an expensive, relatively rare machine, we can’t really test on that platform… and “real” chrome testing is particularly tricky to keep working anyway.

As this isn’t occurring on other browsers, and is about a standard HTML5 element, this may well be a chromium bug, especially if you can create an even more minimal example (e.g. by copy-pasting out the DOM from the browser)

4

I agree it is very likely a Chrome bug, since it only occurs in this browser and starting from version 103.0.5060.114 on arm64.

However, I find this issue only with Jupyter Lab when I have an IFrame with an external url. If I use a local url in the IFrame (e.g http://localhost:3000/), then the problem does not occur.

I created this simple html code with a couple of tabs and in the first one I have the iframe copied from Jupyter Lab and the problem doesn’t occur either. So I think it is a combination of new Chrome versions on Mac arm64 and Jupyter Lab.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
</head>
<body>

<h2>Tabs</h2>

<div class="tab">
  <button class="tablinks active" onclick="openCity(event, 'Chartfactor')">Chartfactor</button>
  <button class="tablinks" onclick="openCity(event, 'Jupyter')">Jupyter</button>
</div>

<div id="Chartfactor" class="tabcontent" style="display: block">
  <h3>Chartfactor</h3>
  <iframe width="1000" height="1000" src="https://chartfactor.com/" frameborder="0" allowfullscreen=""></iframe>
</div>

<div id="Jupyter" class="tabcontent">
  <h3>Jupyter</h3>
  <p>Jupyter Lab.</p> 
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
   
</body>
</html>
5

Correction: it also happens when I put http://localhost:3000/ in the IFrame url.