CSS Zoom: Browser Support, Values, Known Issues

What is CSS Zoom?

CSS Zoom is a CSS property that scales the rendered size of an element and every descendant. Unlike transform: scale, it changes the layout box, so siblings reflow around the new size. The W3C CSS Working Group is standardizing the property in the CSS Viewport Editor's Draft.

Which browsers does CSS Zoom support?

CSS Zoom now ships in every major engine. The Web Platform Baseline marks the property as newly available across Chromium, WebKit, and Gecko engines after Firefox finally added it.

What values does CSS Zoom accept?

CSS Zoom accepts numbers, percentages, and a couple of non-standard keywords, all clamped to zero or higher. The W3C draft formalizes the number and percentage paths, while the keywords stay browser-specific.

• Number: A unitless multiplier where 1 means normal, 1.5 zooms in by 150 percent, and 0.5 zooms out by 50 percent. Negative values are invalid and the browser falls back to 1.
• Percentage: Same effect as the number form but written with a percent sign, where 100% equals 1 and 200% doubles the size. Authors who think in percentages prefer this syntax.
• normal keyword: Resets zoom to 1 and is non-standard. Modern code should use unset, initial, or a fresh number value instead of relying on the keyword.
• reset keyword (Safari only): Cancels any user pinch-zoom on the element. Other engines ignore it, so do not rely on it outside Safari on macOS or iOS.
• Global keywords: inherit, initial, revert, revert-layer, and unset all work. CSS Zoom is not inherited by default, so the inherit keyword is the only way to opt a child element into the parent's value.

How do you use CSS Zoom for a hover effect?

A common production use is enlarging an image when the user hovers it. The recipe uses CSS Zoom on hover plus a clipping container so the zoomed image stays inside its slot.

• Wrap the image: Place the img tag inside a container with overflow: hidden so the zoomed image stays clipped to its slot when it grows.
• Set the base styles: Apply width: 100% and display: block on the image so it fills the container at zoom: 1 with no inline-element gaps.
• Apply the hover zoom: Set zoom: 1.2 inside the img:hover rule to enlarge the image by 20 percent on pointer-over.
• Add a cursor cue: Set cursor: zoom-in on the container so the user knows the element responds to hover before they trigger it.
• Test in Firefox 126: Older Firefox builds ignore the property; verify the recipe in Firefox 126 or later, or use transform: scale(1.2) as a fallback inside @supports not (zoom: 1).

.zoom-on-hover {
    overflow: hidden;
    cursor: zoom-in;
}

.zoom-on-hover img {
    width: 100%;
    display: block;
}

.zoom-on-hover img:hover {
    zoom: 1.2;
}

If a smooth animation matters more than layout reflow, swap zoom: 1.2 for transform: scale(1.2) and add transition: transform 0.3s ease. CSS Zoom is not animatable, so the change always snaps instantly on hover.

What are the known issues with CSS Zoom?

CSS Zoom carries the bruises of its non-standard origin, and even after the W3C draft formalized the behavior, several rough edges remain in production code.

• Pre-126 Firefox is a hard miss: Any browser report from Firefox 125 or earlier shows zero scaling at all; the property is parsed and discarded, which silently breaks Firefox-only branches.
• Not animatable: Browsers do not interpolate zoom over a transition or animation, so smooth scale-ups need transform: scale() instead of zoom.
• Subpixel rounding artifacts: Zoomed text and images can blur on values like zoom: 1.07 because every painted pixel rounds against the device-pixel grid.
• Layout math drifts from getBoundingClientRect: getBoundingClientRect already includes zoom, but offsetHeight and clientHeight do not, which breaks JavaScript layout code; use Element.currentCSSZoom to reconcile the two.
• Scroll containers can clip surprisingly: Zooming an element past its parent height in an overflow: auto container can hide scrollbars on iOS Safari until the user taps inside the box.
• zoom: reset is not portable: Other engines treat reset as an invalid value, so feature-detect with CSS.supports("zoom: reset") before relying on it outside Safari.
• Print stylesheets often misbehave: Some print drivers double-apply zoom and the page-to-paper math, so rendered margins shrink by an extra factor on Chrome's print preview.

In my experience, the most common CSS Zoom bug in cross-browser QA is shipping a zoom: 0.95 down-scale on a desktop dashboard and watching Firefox 125 users report that nothing scales at all; always pair the property with a transform: scale() fallback inside @supports not (zoom: 1).

Citations

All CSS Zoom version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - zoom CSS property: developer.mozilla.org/en-US/docs/Web/CSS/zoom
• MDN Web Docs - zoom property reference: developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/zoom
• MDN Web Docs - Element.currentCSSZoom: developer.mozilla.org/en-US/docs/Web/API/Element/currentCSSZoom
• W3C CSS Viewport Editor's Draft: drafts.csswg.org/css-viewport
• CSS-Tricks Almanac - zoom: css-tricks.com/almanac/properties/z/zoom
• Chrome Platform Status - Standardized CSS zoom: chromestatus.com/feature/5198254868529152
• MDN Web Docs - transform-function: scale(): developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
• web.dev - Baseline: web.dev/baseline