MarkUp x snapdom
Each section triggers one known limitation of snapdom, the library behind MarkUp's comment screenshots. Pin a comment on the marker in each fixture, then compare the screenshot with what you see here.
| Where | snapdom |
|---|---|
Preview env (mar-4055-snapdom-markup-website):
proxy-bundle and markup-sdk
|
3.0.0 |
develop: markup-sdk screenshot plugin |
2.24.3 |
| Upstream latest | 3.4.0 |
SCREENSHOT_CLIENT_DOM workspace flag
and disable the MarkUp extension. With the
extension on, MarkUp takes a native tab screenshot and none of
this applies.
Any version snapdom can't do this Mitigated by MarkUp our proxy works round it Fixed in x.y.z broken in a version we ship Safari browser-specific Picker mode needs Take screenshot
These come from how snapdom works: it copies the DOM into an SVG
<foreignObject> and lets the browser re-draw the
copy. It never takes a real screenshot.
A1
Any version Mostly mitigated by MarkUp
snapdom can't read inside a frame from another origin, so it paints a grey placeholder. MarkUp's proxy rewrites third-party iframes and asks its bundle inside each one to capture itself, which hides this in most cases. These six frames include the ways round that.
A2
Any version Mitigated by MarkUp
snapdom re-downloads every image so it can embed it. If the image's server sends no CORS headers, it can't, even though the browser displays the image fine. google.com sends none; placehold.co does.
useProxy to
its /__markup_cors__ relay, which fetches no-CORS
images on the server.
<img> becomes a grey placeholder and
the Google CSS background disappears: the SDK's
captureElement passes no useProxy.
placehold.co and the local SVG render.
A3
Any version
A canvas that has drawn a cross-origin image without CORS is tainted: the browser stops every script from reading its pixels, snapdom included. Charts and maps that draw remote tiles hit this.
Issues: #199
A4
Any version
snapdom grabs a video's current frame by drawing it to a canvas. A cross-origin video without CORS taints that canvas, so snapdom falls back to the poster image. Audio players are re-drawn, not captured.
A5
Any version
snapdom copies a canvas's pixels at the moment of capture. Charts, maps and Lottie animations that are still loading come out empty. This canvas alternates: 5 seconds blank, 5 seconds painted.
Issues: #486
A6
Any version
Fonts loaded with the JavaScript FontFace() API have no
CSS rule pointing at the file, so snapdom can't find the file to
embed. Both lines use the same Bungee font file.
document.fonts, but its localFonts list
only reads @font-face rules. The bottom line renders
in Bungee.
FontFace API
Loading...@font-face rule
A7
Any version Firefox
Unstyled form controls are painted by the operating system's theme. snapdom copies their computed CSS instead, which the browser then draws literally. The maintainer calls this a known limitation.
A8
Any version Safari / iOS
Safari sometimes paints an SVG foreignObject before its
embedded images have decoded, so images and background images go
missing, most often on the first capture. The maintainer traces this
to a WebKit bug.
📸 🎯 ✅ 🧪
A9
Any version Picker mode
snapdom re-draws a copy of the page rather than taking a real screenshot, so small differences creep in.
The quick brown fox jumps over the lazy dog.
Sphinx of black quartz, judge my vow, said Wilf.
Pack my box with five dozen liquor jugs, please.
A10
Any version Picker mode
A web component with a closed shadow root hides its contents from every page script. snapdom only flattens open shadow roots. No issue reports this; the features doc only promises open ones.
Reference: FEATURES.md, Capture & clone
A11
Any version, including 3.4.0
snapdom only reads @font-face rules from a cross-origin
stylesheet if its host is on a fixed list of font CDNs (Google
Fonts, Typekit, Font Awesome, jsDelivr, unpkg, cdnjs, esm.sh) or in
the fontStylesheetDomains option, or its URL mentions
"font" or the family name. A customer's own CDN usually matches none
of those, and MarkUp's localFonts can't read the sheet
either. The stylesheet is linked without crossorigin,
so MarkUp's proxy leaves it alone. The 3.3.5 change that reads
cross-origin sheets only applies to sheets that pass this filter.
fontStylesheetDomains set to the stylesheet's host,
all three embed the font (try &fsd=<host>
with the harness). MarkUp could pass the hosts of every
cross-origin stylesheet on the page.
Issues: #309
Acme Display
Acme Display
These are bugs, not hard limits. Each one is fixed in a later snapdom,
so the result depends on which version captures the page. Use
?harness=3.4.0 locally to see the fixed behaviour.
B1
Fixed in 3.4.0 Broken in 3.0.0 and 2.24.3
next/font names fonts like __Inter_d65c78.
snapdom builds an internal key as
family__weight__style and splits it on __,
so these families never match and never get embedded. Both lines use
the same Monoton file.
localFonts list gets round the bug; we
expect not. The bottom line renders in Monoton.
Issues: #542
Next font
Next font
B3
Fixed in 3.1.1 Broken in 3.0.0 and 3.1.0 Chrome / Edge
In 3.0.0 and 3.1.0 on Chromium, snapdom draws into the canvas one task before its embedded fonts finish loading, so web-font text comes out invisible on the first capture. 2.24.3 doesn't have this bug, but the preview runs 3.0.0. This font is used nowhere else on the page.
Issues: #506
First capture
after a reload
B4
Fixed in 2.24.16 Broken in 2.24.3 (develop SDK)
The repro from #493: Google's Noto families, loaded with variable
weight ranges and picked per language with
:lang(). Up to 2.24.15 snapdom failed to embed them.
Weight 100 (thin) makes a fallback obvious.
Issues: #493
MarkUp's pin capture snapshots the whole page, then crops it. These cases would slow down or interfere with every other capture, so each one has its own page.
Any version
About 3,000 rows plus one element 40,000px tall. Locally, a viewport capture of the whole page took about 0.2s, so size alone may not slow pins much. Picking the giant element hits the browser's 32,767px canvas limit, so it comes out shrunk.
Untested risk
A customer page with a
<meta> Content-Security-Policy. MarkUp's proxy
strips CSP headers but not meta tags, so its bundle or snapdom's
fetches may be blocked. The result is unknown; that's the
experiment.
v3 only
snapdom 3 reuses earlier captures when the DOM hasn't changed. This
box changes colour through insertRule alone, so a
second capture could come back stale. In local runs it didn't, in
any version; this page checks MarkUp behaves the same.