The polyfill for the inline SVG slide rendered by Marpit.
- WebKit based browser: Safari and iOS browsers (including iOS Chrome, iOS Firefox, iOS Edge, and so on...)
<!-- Generated HTML by Marpit's inline SVG mode --> <div class="marpit"> <svg viewBox="0 0 1280 720" data-marpit-svg=""> <foreignObject width="1280" height="720"> <section>...</section> </foreignObject> </svg> </div> <!-- After than, use polyfill through jsDelivr CDN --> <script src="https://cdn.jsdelivr.net/npm/@marp-team/marpit-svg-polyfill/lib/polyfill.browser.js"></script>
But unfortunately, WebKit browser has not scaled the wrapped HTML correctly. It is caused from a long standing bug 23113, and it does not resolved in the last 15 years.
Note A brand-new SVG engine for WebKit called as "Layer-based SVG engine (LBSE)" is currently under development, and it will finally bring glitch-free scaling without JS. (See also: Status of the new SVG engine in WebKit)
You can test LBSE in Safari Technology Preview by following these steps:
- Install Safari Technology Preview
defaults write com.apple.SafariTechnologyPreview IncludeInternalDebugMenu 1in terminal
- Open Safari Technology Preview
- Turn on "Layer-based SVG engine (LBSE)" from "Debug" menu → "WebKit Internal Features"
- Restart app
marpit-svg-polyfill v2.1.0 and later will try to detect whether or not enabled LBSE, and does not apply polyfill if LBSE was available.
We try to simulate scaling and centering by applying
transform-origin style to Marpit
<svg viewBox="0 0 1280 960"> <foreignObject width="1280" height="960"> <section style="transform-origin:0 0;transform:matrix(......);"> ... </section> </foreignObject> </svg>
marpit-svg-polyfill uses the result of
getScreenCTM() method, so the polyfill will sacrifice "zero-JS slide", the key feature of inline SVG.
WebKit browser would not trigger repainting even if modified the contents of slide. It becomes a problem when supporting the live preview feature in Marp tools.
Fortunately, a genius already resolved this problem only in CSS!
transform:translateZ(0) would trigger re-painting immidiately when modified contents.
People like to put GIF animation in the slide. However, GIF in polyfilled slides have glitches. GIF updates only a cropped part somewhere.
transform:translateZ(0.0001px) to each
<section> elements within SVG is a magic to resolve that.
Warning This style brings slightly blurred contents too. Our polyfill prefers to render animated contents correctly.
We are following the contributing guideline of marp-team projects. Please read these guidelines this before starting work in this repository.
Managed by @marp-team.
- Yuki Hattori (@yhatt)
This module releases under the MIT License.