fix: CSS vars perf, scrollbar styles, SVG image inline, nested line-clamp, iframe pseudos & isolation, Tailwind border (#334 #341 #348 #362 #371 #372 #386)

[tinchox5]

Summary

This PR bundles several bugfixes and small improvements:

• A large number of CSS variables will affect snapshot performance #348 – CSS vars / performance: shouldIgnoreProp ahora ignora --* y se agrega la opción excludeStyleProps (regex o función) al snapshot de estilos para reducir el costo cuando hay miles de CSS variables en :root.
• Line-clamp ellipsis only renders for outermost element, fails for 1-level nested elements (v2.1.0) #386 – Nested line-clamp: se introduce lineClampTree(el) y capture lo usa para aplicar el clamping también a elementos anidados con -webkit-line-clamp.
• canvas abnormal border style #362 – Canvas + Tailwind border: 0 solid: normaliza casos donde todos los border-*-width son 0 a border: none en el snapshot, evitando bordes “fantasma” en el output.
• Unable to capture image inside svg image tag #341 – SVG <image href="https://...">: las imágenes dentro de <image> en SVG se inlinéan como data URLs usando snapFetch, igual que los <img> HTML.
• The custom scrollbar style did not take effect, resulting in a native scrollbar style that looks ugly #334 – Custom scrollbar styles: se extraen reglas ::-webkit-scrollbar (incluyendo @import/@media) y se inyectan en el <style> del foreignObject para preservar el estilo del scrollbar cuando el elemento no fue scrolleado.
• Pseudo Elements are not Rendered in iFrames #371 / iframe CSS is applied to the snapdom wrapper. #372 – iframe pseudos & isolation: se mejora la detección de estilos (incluyendo pseudos en iframe) y se aísla el wrapper del iframe usando all: initial para que no herede CSS global.

Testing

• Unit tests actualizados/pasados para:
  • shouldIgnoreProp y excludeStyleProps (A large number of CSS variables will affect snapshot performance #348)
  • normalización de border: 0 solid a border: none (canvas abnormal border style #362)
  • lineClampTree (Line-clamp ellipsis only renders for outermost element, fails for 1-level nested elements (v2.1.0) #386)
  • inlining de SVG <image href="https://..."> (Unable to capture image inside svg image tag #341)
  • collectScrollbarCSS y captura con estilos de scrollbar (The custom scrollbar style did not take effect, resulting in a native scrollbar style that looks ugly #334)
  • aislamiento de wrapper en iframe (iframe CSS is applied to the snapdom wrapper. #372)
• Demos manuales añadidos para reproducir/verificar los casos: d41–d45.

---

Note

Medium Risk
Touches core DOM capture/clone/style inlining paths (including iframe, font embedding, and sizing heuristics), so regressions could affect output fidelity across browsers despite added test coverage.

Overview
Improves capture fidelity and performance by changing style snapshotting to ignore CSS custom properties by default, adding excludeStyleProps, and normalizing inline styles to their computed (cascade-resolved) values so stylesheet !important can override authored inline styles.

Fixes multiple rendering edge cases: inlines SVG <image href> resources, preserves custom ::-webkit-scrollbar styling by collecting and injecting scrollbar rules, applies line-clamp to nested descendants via lineClampTree, and isolates the <foreignObject> wrapper with all:initial to prevent iframe CSS cascade bleed.

Adds Safari/WebKit workarounds (configurable safariWarmupAttempts, improved warmup + logging) and introduces bounded FIFO caches via EvictingMap to avoid unbounded memory growth. Also includes targeted fixes for Tailwind border: 0 solid normalization, root/body sizing using scrollHeight, relative background URL resolution, Firefox checkbox/radio replacements, and expanded unit test coverage plus minor docs/demo updates.

^{Written by Cursor Bugbot for commit b49323d. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 4 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[cursor]

INLINE_SIZED_TAGS includes block-level p tag, skipping width

Medium Severity

The INLINE_SIZED_TAGS set includes 'p', which is a block-level element by default. The skipWidth condition is isInline || INLINE_SIZED_TAGS.has(tagName), meaning width, min-width, and max-width are unconditionally skipped for all <p> elements regardless of their actual display value. Block-level paragraphs normally fill their container width, and stripping width from their style key can cause layout differences in the captured output.

 

[cursor]

Border normalization deletes border-radius styling unintentionally

Medium Severity

The border normalization for Tailwind's border: 0 solid sets out['border'] = 'none', which in CSS shorthand resets border-radius-related properties too when the browser expands it. More directly, the BORDER_PROPS list doesn't include border-radius, border-image, or border-collapse/border-spacing, so those remain in the snapshot — but the shorthand border: none can conflict with them during rendering. Also, elements using border-image with zero-width borders (valid CSS for decorative purposes) will lose their border-image since the shorthand override takes precedence.