Trigger flushing auto-scaling SVG when resized wrapper

marp-team · Aug 11, 2022 · 7c737db · 7c737db
1 parent 6b0820f
commit 7c737db
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 23 deletions.
diff --git a/src/custom-elements/browser/marp-auto-scaling.ts b/src/custom-elements/browser/marp-auto-scaling.ts
@@ -31,9 +31,10 @@ export class MarpAutoScaling extends HTMLElement {
     this.containerObserver = new ResizeObserver(
       generateObserverCallback('containerSize')
     )
-    this.wrapperObserver = new ResizeObserver(
-      generateObserverCallback('wrapperSize')
-    )
+    this.wrapperObserver = new ResizeObserver((...args) => {
+      generateObserverCallback('wrapperSize')(...args)
+      this.flushSvgDisplay()
+    })
   }
 
   static get observedAttributes() {
@@ -70,25 +71,11 @@ export class MarpAutoScaling extends HTMLElement {
         : undefined
     }
 
-    // Workaround for the latest Chromium browser (>= 105?)
-    // TODO: Remove this workaround when the bug is fixed
-    if (this.svg) {
-      const { svg: connectedSvg } = this
-
-      // I don't know why but a nested SVG may require to flush the display style for rendering correctly
-      requestAnimationFrame(() => {
-        connectedSvg.style.display = 'inline'
-
-        requestAnimationFrame(() => {
-          connectedSvg.style.display = ''
-        })
-      })
-    }
-
     this.container =
       this.svg?.querySelector<HTMLSpanElement>(`span[${dataContainer}]`) ??
       undefined
 
+    this.flushSvgDisplay()
     this.observe()
   }
 
@@ -105,6 +92,19 @@ export class MarpAutoScaling extends HTMLElement {
     this.observe()
   }
 
+  // Workaround for Chromium 105+
+  private flushSvgDisplay() {
+    const { svg: connectedSvg } = this
+
+    if (connectedSvg) {
+      connectedSvg.style.display = 'inline'
+
+      requestAnimationFrame(() => {
+        connectedSvg.style.display = ''
+      })
+    }
+  }
+
   private observe() {
     this.containerObserver.disconnect()
     this.wrapperObserver.disconnect()

diff --git a/test/custom-elements/browser.ts b/test/custom-elements/browser.ts
@@ -279,11 +279,7 @@ describe('The hydration script for custom elements', () => {
         ) as MarpAutoScaling
         const svg = autoScaling.shadowRoot.querySelector('svg') as SVGElement
 
-        // Initially SVG's display style is not set
-        expect(svg.style.display).toBe('')
-
-        // At the next rendering frame, display style is set as `inline`
-        await waitNextRendering()
+        // display style sets as `inline`
         expect(svg.style.display).toBe('inline')
 
         // After that, display style is reverted to empty string