uhyo · August 16, 2024 09:11
diff --git a/google-chrome-top-layer-bug-repro.html b/google-chrome-top-layer-bug-repro.html
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <title>repro</title>
  <style>
    #popover1 {
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
    }
  </style>
 </head>
 <body>
  <dialog id="dialog1">
    Dialog1
  </dialog>
  <div popover="manual" id="popover1">
    Popover1
  </div>
  <script>
    const popover1 = document.getElementById('popover1');
    const dialog1 = document.getElementById('dialog1');

    dialog1.showModal();
    popover1.showPopover();
    dialog1.close();
    // Uncommenting the following line will fix the issue
    // await new Promise(resolve => setTimeout(resolve, 0));
    dialog1.showModal();
  </script>
 </body>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>repro</title>
	<style>
	#popover1 {
	top: 100px;
	left: 100px;
	width: 100px;
	height: 100px;
	}
	</style>
	</head>
	<body>
	<dialog id="dialog1">
	Dialog1
	</dialog>
	<div popover="manual" id="popover1">
	Popover1
	</div>
	<script>
	const popover1 = document.getElementById('popover1');
	const dialog1 = document.getElementById('dialog1');

	dialog1.showModal();
	popover1.showPopover();
	dialog1.close();
	// Uncommenting the following line will fix the issue
	// await new Promise(resolve => setTimeout(resolve, 0));
	dialog1.showModal();
	</script>
	</body>