web/flows: fix flow executor background overlay in safari

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

web/src/flow/FlowExecutor.ts

@@ -26,7 +26,7 @@ import "@goauthentik/flow/stages/password/PasswordStage";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html, render } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { until } from "lit/directives/until.js";
@@ -458,13 +458,13 @@ export class FlowExecutor extends AKElement implements StageHost {
         }
     }
 
-    render(): TemplateResult {
-        return html`<div class="pf-c-background-image">
-                <svg
+    renderBackgroundOverlay(): TemplateResult {
+        const overlaySVG = html`<svg
             xmlns="http://www.w3.org/2000/svg"
             class="pf-c-background-image__filter"
             width="0"
             height="0"
+            style="display:none;"
         >
             <filter id="image_overlay">
                 <feColorMatrix
@@ -488,8 +488,13 @@ export class FlowExecutor extends AKElement implements StageHost {
                     <feFuncA type="table" tableValues="0 1"></feFuncA>
                 </feComponentTransfer>
             </filter>
-                </svg>
-            </div>
+        </svg>`;
+        render(overlaySVG, document.body);
+        return overlaySVG;
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-background-image">${this.renderBackgroundOverlay()}</div>
             <div class="pf-c-page__drawer">
                 <div class="pf-c-drawer ${this.inspectorOpen ? "pf-m-expanded" : "pf-m-collapsed"}">
                     <div class="pf-c-drawer__main">