From a7706d0d980307a91c443c6bb57e048cade7dc75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <green@sapphi.red>
Date: Wed, 7 Sep 2022 04:22:59 +0900
Subject: [PATCH] fix: prevent error overlay style being overridden (fixes
 #9969) (#9971)

---
 packages/vite/src/client/overlay.ts | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
index f9a22b7db2c6b3..e094f5664a5bb6 100644
--- a/packages/vite/src/client/overlay.ts
+++ b/packages/vite/src/client/overlay.ts
@@ -1,8 +1,17 @@
 import type { ErrorPayload } from 'types/hmrPayload'
 
+// set :host styles to make playwright detect the element as visible
 const template = /*html*/ `
 <style>
 :host {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.backdrop {
   position: fixed;
   z-index: 99999;
   top: 0;
@@ -99,15 +108,17 @@ code {
   cursor: pointer;
 }
 </style>
-<div class="window">
-  <pre class="message"><span class="plugin"></span><span class="message-body"></span></pre>
-  <pre class="file"></pre>
-  <pre class="frame"></pre>
-  <pre class="stack"></pre>
-  <div class="tip">
-    Click outside or fix the code to dismiss.<br>
-    You can also disable this overlay by setting
-    <code>server.hmr.overlay</code> to <code>false</code> in <code>vite.config.js.</code>
+<div class="backdrop">
+  <div class="window">
+    <pre class="message"><span class="plugin"></span><span class="message-body"></span></pre>
+    <pre class="file"></pre>
+    <pre class="frame"></pre>
+    <pre class="stack"></pre>
+    <div class="tip">
+      Click outside or fix the code to dismiss.<br>
+      You can also disable this overlay by setting
+      <code>server.hmr.overlay</code> to <code>false</code> in <code>vite.config.js.</code>
+    </div>
   </div>
 </div>
 `