-
Notifications
You must be signed in to change notification settings - Fork 22.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
zoom CSS Property #33473
zoom CSS Property #33473
Conversation
Preview URLs Flaws (4)URL:
URL:
(comment last updated: 2024-05-13 10:36:52) |
## 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. | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we can drop the H2 here and incorporate it right into the description.
What do you think about this?
## 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. | |
@@ -9,6 +9,12 @@ browser-compat: css.properties.zoom | |||
|
|||
The **`zoom`** [CSS](/en-US/docs/Web/CSS) property can be used to control the magnification level of an element. {{cssxref("transform-function/scale", "transform: scale()")}} should be used instead of this property, if possible. However, unlike CSS Transforms, `zoom` affects the layout size of the element. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we update this sentence that advises against using zoom
? I don't think this applies any longer, right?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you! 🙏🏻
Description
Updated the examples of
zoom
CSS propertyMotivation
Working on Implement zoom property for CSS
Related issues and pull requests