fix: emails with height:100% on a wrapper element render blank below the fold#486
fix: emails with height:100% on a wrapper element render blank below the fold#486shukiv wants to merge 1 commit into
Conversation
Some HTML emails set height:100% on a full-bleed wrapper table/div rather
than html/body. With the viewer's body{overflow:hidden}, this collapses
documentElement.scrollHeight to the iframe's 150px default, so the
scrollHeight-based auto-resize locks the iframe short and the body renders
blank below the fold. A Box.co.il verification email rendered as a
logo-only 150px strip.
- Neutralise height:100% on any element so the body grows to its content.
- Measure max(documentElement, body).scrollHeight, and re-measure on a
fixed cadence over a short settle window so a late reflow (height:100%
wrapper, or images that resize after onload) is caught even when no
ResizeObserver/image event fires.
|
can you share a broken eml |
|
Sanitized repro: https://gist.github.com/shukiv/21e1fa521f68d8a578b8524e7941122e It's the real offending email with the verification token swapped for a placeholder (no live token, no recipient PII); the HTML/CSS that triggers the clip is untouched. Root cause: a full-bleed wrapper Repro: open the .eml in the viewer → renders as a logo-only ~150px strip, body blank below the fold. With this PR → full height, verify link visible. |
2 participants
Problem. Some HTML emails set
height:100%on a full-bleed wrapper table/div rather thanhtml/body. With the viewer'sbody{overflow:hidden}, this collapsesdocumentElement.scrollHeightto the iframe's 150px default, so the scrollHeight-based auto-resize locks the iframe short and the body renders blank below the fold. A Box.co.il verification email rendered as a logo-only strip.Fix.
height:100%on any element ([style*="height:100%"]{height:auto!important}) so the body grows to its content.max(documentElement, body).scrollHeight, and re-measure on a fixed cadence over a short settle window — a self-clearing catch-all for late reflows (height:100% wrappers, or images that resize after onload) that doesn't depend on ResizeObserver or image load/error events firing.Testing. Reproduced the clipped render, confirmed the iframe resizes 150→full content height with the body fully visible. Typecheck passes.