zoom CSS Property

[dletorey]

Description

Updated the examples of zoom CSS property

Motivation

Working on Implement zoom property for CSS

Related issues and pull requests

• Data PR
• BCD PR
• Firefox Release note PR

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/transform-function/scale
• /en-US/docs/Web/CSS/zoom

Flaws (4)

URL: /en-US/docs/Web/CSS/transform-function/scale
Title: scale()
Flaw count: 2

• macros:
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn//CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn//Getting_started_with_the_web/CSS_basics

---

URL: /en-US/docs/Web/CSS/zoom
Title: zoom
Flaw count: 2

• macros:
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn//CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn//Getting_started_with_the_web/CSS_basics

(comment last updated: 2024-05-13 10:36:52)

[bsmth]

I think we can drop the H2 here and incorporate it right into the description.

What do you think about this?

Suggested change

	## Difference between zoom and transform:scale()
	The `zoom` CSS property scales the whole element that is being targeted and this will have an effect on the layout of the page. When scaling the zoomed element scales from `top` `center` when using the default {{CSSXRef("writing-mode")}}.
	{{cssxref("transform-function/scale", "transform: scale()")}} the element being targeted will remain the same and the content within will scale, if scaling makes the element larger than the containing element then {{CSSXRef("overflow")}} comes into place. When scaling the transformed element scales from the `center` (by default) this can be changed with {{CSSXRef("transform-origin")}} CSS property.
	The `zoom` CSS property scales the targeted element, which can affect the page layout. When scaling, the zoomed element scales from `top` and `center` when using the default {{CSSXRef("writing-mode")}}.
	In contrast, an element scaled using {{cssxref("transform-function/scale", "scale()")}} will not cause layout recalculation and move other elements on the page. If scaling using `scale()` makes the contents larger than the containing element, then {{CSSXRef("overflow")}} comes into effect. Additionally, transformed elements scale from the `center` by default using `scale()`; this can be changed with {{CSSXRef("transform-origin")}} CSS property.

[bsmth]

Should we update this sentence that advises against using zoom? I don't think this applies any longer, right?

[bsmth]

Thank you! 🙏🏻