Conversation
This was referenced May 7, 2024
Contributor
|
Preview URLs Flaws (4)URL:
URL:
(comment last updated: 2024-05-13 10:36:52) |
This was referenced May 9, 2024
bsmth
reviewed
May 13, 2024
Comment on lines
+12
to
+17
| ## 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. | ||
|
|
Member
There was a problem hiding this comment.
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
reviewed
May 13, 2024
| @@ -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. | |||
Member
There was a problem hiding this comment.
Should we update this sentence that advises against using zoom? I don't think this applies any longer, right?
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Updated the examples of
zoomCSS propertyMotivation
Working on Implement zoom property for CSS
Related issues and pull requests