diff --git a/CHANGELOG.md b/CHANGELOG.md index 5587eb0..ac1ad45 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## [Unreleased] +### Fixed + +- Apply workaround for vanished `` in Chrome 105+ ([#312](https://github.com/marp-team/marp-core/pull/312)) + ## v3.3.0 - 2022-08-11 ### Changed diff --git a/src/custom-elements/browser/marp-auto-scaling.ts b/src/custom-elements/browser/marp-auto-scaling.ts index 902be07..1f5ddad 100644 --- a/src/custom-elements/browser/marp-auto-scaling.ts +++ b/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(`span[${dataContainer}]`) ?? undefined diff --git a/test/custom-elements/browser.ts b/test/custom-elements/browser.ts index 8958d17..5face3b 100644 --- a/test/custom-elements/browser.ts +++ b/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((resolve) => requestAnimationFrame(() => resolve())) + + it("flushes SVG's display style on mounted", async () => { + expect.hasAssertions() + + browser.applyCustomElements() + document.body.innerHTML = 'test' + + 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('') + }) + }) }) })