fix(preset-mini): transform-cpu should not include rotate-x and rotate-y
#3813
Conversation
This file contains 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
The class name `transform-cpu` does not achieve the expected effect because `rotateX()` and `rotateY()` cause the browser to use gpu rendering.
✅ Deploy Preview for unocss ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
antfu
approved these changes
May 16, 2024
antfu
changed the title
transform-cpu should not include rotate-x and rotate-y
antfu
approved these changes
Jun 11, 2024
Simon-He95
pushed a commit
to Simon-He95/unocss
that referenced
this pull request
Jun 12, 2024
Simon-He95
pushed a commit
to Simon-He95/unocss
that referenced
this pull request
Jun 12, 2024
ramackersjp
added a commit
to ramackersjp/Piped
that referenced
this pull request
Jun 16, 2024
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@unocss/eslint-config](https://togithub.com/unocss/unocss/tree/main/packages/eslint-config#readme) ([source](https://togithub.com/unocss/unocss/tree/HEAD/packages/eslint-config)) | [`0.60.4` -> `0.61.0`](https://renovatebot.com/diffs/npm/@unocss%2feslint-config/0.60.4/0.61.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [@unocss/preset-icons](https://togithub.com/unocss/unocss/tree/main/packages/preset-icons#readme) ([source](https://togithub.com/unocss/unocss/tree/HEAD/packages/preset-icons)) | [`0.60.4` -> `0.61.0`](https://renovatebot.com/diffs/npm/@unocss%2fpreset-icons/0.60.4/0.61.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [@unocss/preset-uno](https://togithub.com/unocss/unocss/tree/main/packages/preset-uno#readme) ([source](https://togithub.com/unocss/unocss/tree/HEAD/packages/preset-uno)) | [`0.60.4` -> `0.61.0`](https://renovatebot.com/diffs/npm/@unocss%2fpreset-uno/0.60.4/0.61.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [@unocss/preset-web-fonts](https://togithub.com/unocss/unocss/tree/main/packages/preset-web-fonts#readme) ([source](https://togithub.com/unocss/unocss/tree/HEAD/packages/preset-web-fonts)) | [`0.60.4` -> `0.61.0`](https://renovatebot.com/diffs/npm/@unocss%2fpreset-web-fonts/0.60.4/0.61.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [@unocss/reset](https://togithub.com/unocss/unocss) | [`0.60.4` -> `0.61.0`](https://renovatebot.com/diffs/npm/@unocss%2freset/0.60.4/0.61.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [@unocss/transformer-directives](https://togithub.com/unocss/unocss/tree/main/packages/transformer-directives#readme) ([source](https://togithub.com/unocss/unocss/tree/HEAD/packages/transformer-directives)) | [`0.60.4` -> `0.61.0`](https://renovatebot.com/diffs/npm/@unocss%2ftransformer-directives/0.60.4/0.61.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [@unocss/transformer-variant-group](https://togithub.com/unocss/unocss/tree/main/packages/transformer-variant-group#readme) ([source](https://togithub.com/unocss/unocss/tree/HEAD/packages/transformer-variant-group)) | [`0.60.4` -> `0.61.0`](https://renovatebot.com/diffs/npm/@unocss%2ftransformer-variant-group/0.60.4/0.61.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [unocss](https://togithub.com/unocss/unocss) | [`0.60.4` -> `0.61.0`](https://renovatebot.com/diffs/npm/unocss/0.60.4/0.61.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>unocss/unocss (@​unocss/eslint-config)</summary> ### [`v0.61.0`](https://togithub.com/unocss/unocss/releases/tag/v0.61.0) [Compare Source](https://togithub.com/unocss/unocss/compare/v0.60.4...v0.61.0) ##### 🚀 Features - **core**: - Support generator in rule matcher - by [@​antfu](https://togithub.com/antfu) in [unocss/unocss#3884 [<samp>(7e156)</samp>](https://togithub.com/unocss/unocss/commit/7e15633b) - Introduce special symbols for applying custom variants - by [@​antfu](https://togithub.com/antfu) in [unocss/unocss#3885 [<samp>(d80f6)</samp>](https://togithub.com/unocss/unocss/commit/d80f6cad) - **preset-mini**: - Add support for peer and group variants on aria-\* variants to Preset-Mini - by [@​Johnkat-Mj](https://togithub.com/Johnkat-Mj) and [@​Simon-He95](https://togithub.com/Simon-He95) in [unocss/unocss#3692 [<samp>(c3265)</samp>](https://togithub.com/unocss/unocss/commit/c3265cc2) - **vscode**: - Add borderRadius to control color cube - by [@​Simon-He95](https://togithub.com/Simon-He95) and [@​antfu](https://togithub.com/antfu) in [unocss/unocss#3872 [<samp>(ad294)</samp>](https://togithub.com/unocss/unocss/commit/ad294ffd) ##### 🐞 Bug Fixes - **extractor-arbitrary-variants**: - Quote in \[] - by [@​Simon-He95](https://togithub.com/Simon-He95) and [@​antfu](https://togithub.com/antfu) in [unocss/unocss#3875 [<samp>(cd529)</samp>](https://togithub.com/unocss/unocss/commit/cd5296f5) - **preset-mini**: - ColorableShadows with cssvar - by [@​Simon-He95](https://togithub.com/Simon-He95) in [unocss/unocss#3878 [<samp>(1ac22)</samp>](https://togithub.com/unocss/unocss/commit/1ac223a4) - Support composite props - by [@​zyyv](https://togithub.com/zyyv) and [@​antfu](https://togithub.com/antfu) in [unocss/unocss#3810 [<samp>(f7ad5)</samp>](https://togithub.com/unocss/unocss/commit/f7ad5200) - `transform-cpu` should not include `rotate-x` and `rotate-y` - by [@​zzc6332](https://togithub.com/zzc6332) in [unocss/unocss#3813 [<samp>(ae072)</samp>](https://togithub.com/unocss/unocss/commit/ae072a54) - **transformer-attributify-jsx**: - With prefix - by [@​Simon-He95](https://togithub.com/Simon-He95) in [unocss/unocss#3867 [<samp>(83728)</samp>](https://togithub.com/unocss/unocss/commit/83728748) - **vite**: - Legacy chunks build - by [@​Simon-He95](https://togithub.com/Simon-He95) and [@​antfu](https://togithub.com/antfu) in [unocss/unocss#3879 [<samp>(c7f63)</samp>](https://togithub.com/unocss/unocss/commit/c7f63118) ##### [View changes on GitHub](https://togithub.com/unocss/unocss/compare/v0.60.4...v0.61.0) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/ramackersjp/Piped). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4zOTMuMCIsInVwZGF0ZWRJblZlciI6IjM3LjM5My4wIiwidGFyZ2V0QnJhbmNoIjoibWFzdGVyIiwibGFiZWxzIjpbXX0=-->
](https://renovatebot.com){kind=link}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The class name
transform-cpudoes not achieve the expected effect becauserotateX()androtateY()cause the browser to use gpu rendering.There is an example created by stackblitz, demonstrating the difference when an svg icon is rendered using cpu rendering versus gpu rendering in Chrome. The difference will not be shown in "Open Preview" but will be shown in "Open Preview in new tab":
Enabling the
Layer bordersoption in theRenderingtab of Chrome’s DevTools allows for better observation of the differences between them: