Merge pull request #312 from marp-team/workaround-for-vanished-auto-s…

…caling-component

Apply workaround for vanished <marp-auto-scaling> component in Chrome 105+

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Apply workaround for vanished `<marp-auto-scaling>` in Chrome 105+ ([#312](https://github.com/marp-team/marp-core/pull/312))
+
 ## v3.3.0 - 2022-08-11
 
 ### Changed

src/custom-elements/browser/marp-auto-scaling.ts

@@ -70,6 +70,21 @@ 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

test/custom-elements/browser.ts

@@ -263,5 +263,33 @@ describe('The hydration script for custom elements', () => {
       expect(overloaded.container.style.marginRight).toBe('0px')
       expect(overloaded.container.style.marginLeft).toBe('auto')
     })
+
+    describe('Rendering workaround for Chromium 105+', () => {
+      const waitNextRendering = () =>
+        new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+
+      it("flushes SVG's display style on mounted", async () => {
+        expect.hasAssertions()
+
+        browser.applyCustomElements()
+        document.body.innerHTML = '<marp-auto-scaling>test</marp-auto-scaling>'
+
+        const autoScaling = document.querySelector(
+          'marp-auto-scaling'
+        ) 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()
+        expect(svg.style.display).toBe('inline')
+
+        // After that, display style is reverted to empty string
+        await waitNextRendering()
+        expect(svg.style.display).toBe('')
+      })
+    })
   })
 })