# Frontend Errors Units Rendering Viewport > Use when a mobile hero section overflows because of `100vh`, deciding between the small (`svh`), large (`lvh`), and dynamic (`dvh`) viewport-unit families, picking between `em` and `rem` for font-size or component spacing, reasoning about CSS px versus device px on a HiDPI / Retina display, sizing a `` backing store to match `devicePixelRatio`, handling iPhone notch / Dynamic Island safe areas with `env(safe-area-inset-*)`, configuring the `` tag with `viewport-fit=cover`, debugging unexpected font-size compounding three levels deep, or migrating off the legacy `--vh` JavaScript workaround for the mobile-chrome viewport bug. Prevents the most common 2026 unit and viewport regressions : a `100vh` hero that gets covered by the mobile browser chrome on first load and shows empty whitespace once the chrome retracts, nested `1.5em` font-size declarations that compound to 3 375x at three levels deep, `100vw` that includes the desktop scrollbar gutter and overflows the body, `env(safe-a - Skill: `impertio-studio/frontend-errors-units-rendering-viewport` (Agent Skill, multi-file: 4 files) - Install (CLI): `npx skillmds@latest add impertio-studio/frontend-errors-units-rendering-viewport` - Raw SKILL.md: https://api.skillmd.com/api/skills/impertio-studio/frontend-errors-units-rendering-viewport/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: Impertio-Studio (https://skillmd.com/u/impertio-studio) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/impertio-studio/frontend-errors-units-rendering-viewport --- # Frontend Errors : Units, Rendering, Viewport This skill is the operational reference for CSS length units, viewport-percentage units, font-relative units, the CSS pixel versus device pixel distinction, and the `env(safe-area-inset-*)` + `viewport-fit=cover` pairing for notch and Dynamic Island handling. It is an errors-class skill : every section is anchored to a real-world failure mode, with the spec citation that explains it. The skill does NOT cover container-query units (`cqw`, `cqh`, `cqi`, `cqb`, `cqmin`, `cqmax` ; see `[[frontend-syntax-css-container-queries]]`), `clamp()` typography (see `[[frontend-impl-typography-system]]`), or animation jank (see `[[frontend-errors-animation-jank]]`). ## Quick Reference ### Floor rules - ALWAYS use `100dvh` (or `100svh` for guaranteed-fit) for full-height mobile heroes. NEVER use `100vh` ; per MDN it currently resolves to `100lvh`, so the hero overflows when mobile chrome is visible. - ALWAYS use `rem` (or `%`) for `font-size`. NEVER use `em` for `font-size` in nested contexts ; it compounds (1 5 × 1 5 × 1 5 = 3 375 at three levels deep). - ALWAYS use `em` for properties that should scale WITH the local font-size : button padding, line-height multipliers, icon sizing inside a text element. NEVER use `rem` for those ; the relationship to the local text breaks. - ALWAYS include `viewport-fit=cover` in `` AND pair every edge-touching surface with `env(safe-area-inset-*)`. NEVER use `env(safe-area-inset-*)` alone ; without `viewport-fit=cover` the values are 0 on iOS. - ALWAYS multiply `` backing-store width and height by `devicePixelRatio` and call `ctx.scale(dpr, dpr)`. NEVER set `canvas.width = canvas.style.width` ; the result is blurry on Retina. - ALWAYS prefer `100%` over `100vw` for full-bleed sections that are children of ``. NEVER use `100vw` without considering classic-scrollbar systems where `100vw` overflows by the scrollbar width. - ALWAYS use `rem`-based font sizes that respect the user's browser zoom and font-size preference. NEVER hardcode `font-size: 14px` ; it blocks accessibility scaling. - NEVER use `in`, `cm`, `mm`, `Q` for screen layouts. They are anchored to the CSS reference inch (`1in = 96px`), NOT to physical inches. Reserve for `@media print`. ### Decision tree 1 : Which viewport unit for which use case ? ``` Full-height hero that should adapt as mobile chrome shows / hides ? -> 100dvh. UA throttles updates (step, not animate) during chrome transition. Hero / modal that must NEVER overflow even with chrome fully visible ? -> 100svh. Conservative ; works on every device. Full-screen overlay that should fill the maximum extent when chrome is retracted ? -> 100lvh. Equivalent to current default vh behavior per MDN. Writing-mode-agnostic full-width container (vertical-rl Japanese, ltr Latin, rtl Arabic) ? -> 100dvi (or 100vi for legacy). Inline-axis percentage, follows writing-mode. Full-block-axis container with writing-mode awareness ? -> 100dvb (or 100vb for legacy). Layered fallback for older browsers that lack dv* ? -> Author 100svh as the conservative default, override with 100dvh inside an @supports (height: 100dvh) block. Modern browsers get adaptive ; older get guaranteed-fit. Legacy support needed and you cannot rewrite ? -> 100vh, but acknowledge mobile chrome catastrophe. Document the trade-off. Pre-2022 community workaround : --vh CSS custom property updated from JS on resize. This is now obsolete ; migrate to dvh as soon as possible. ``` ### Decision tree 2 : `em` or `rem` ? ``` Property is font-size ? -> rem (or %). em compounds in nested rules and produces unpredictable sizing three levels deep. Property is button / control padding that should grow with button label text ? -> em. Padding 0 5em 1em on a