fix: radiobutton icon misalignment at non-100% zoom levels #19133
Conversation
Forces GPU rendering to fix subpixel rounding issues that caused the icon to be off-center when page is scaled to 110% or other non-standard zoom levels. Fixed primefaces#17642"
|
@rockypiotr is attempting to deploy a commit to the cetincakiroglu's projects Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
This PR fixes a visual bug where the radiobutton icon appears misaligned when the browser page is zoomed to non-standard levels (e.g., 110%). The fix forces GPU rendering through CSS properties to resolve subpixel rounding issues that cause the misalignment.
- Adds GPU acceleration via
transform: translateZ(0)to the radiobutton icon - Adds
will-change: transformhint to the radiobutton box element - Addresses issue #17642
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .p-radiobutton-box { | ||
| will-change: transform; | ||
| } | ||
|
|
||
| .p-radiobutton-icon { | ||
| transform: translateZ(0); | ||
| } |
There was a problem hiding this comment.
[nitpick] Consider adding a comment explaining that these styles fix icon misalignment at non-100% zoom levels (issue #17642). This will help future maintainers understand why GPU acceleration is being forced here. For example:
/* Fix for icon misalignment at non-100% zoom levels (#17642) */
.p-radiobutton-box {
will-change: transform;
}
.p-radiobutton-icon {
transform: translateZ(0);
}There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
1 participant
Forces GPU rendering to fix subpixel rounding issues that caused
the icon to be off-center when page is scaled to 110% or other
non-standard zoom levels.
Fixed #17642"
Defect Fixes
When submitting a PR, please also documenting the error and manually link to an issue.
Feature Requests
Due to company policy, we are unable to accept feature request PRs with significant changes as such cases has to be implemented by our team following our own processes.
Smaller scaled feature implementations such as adding a property to a component will be considered for merging.