🐛 Bug Report
Set Windows to an uneven OS scale level such as 125% in Settings > System > Display.
Notice the stepper animation for the line when pressed (moving from hover to active) shows the line shifting but not changing size:
Compared to a even scale such as 100%:
Note: It seems to reproduce on the canvas page and the canvas page in isolation but does not reproduce for me on the docs page.
💁 Possible Solution
Apply transforms to prevent snapping to device pixels
Found a discussion on mdn (so Firefox, not Chrome which is where the behavior is seen) that says browsers using transforms try to align on device pixels and shows an example of using a small rotate to get the browser to avoid snapping to device pixel sizes. Tried it briefly and it seemed to help at the uneven scale size but cause artifacts at even sizes.
Consider moving shapes to SVG
Maybe using an SVG and CSS animations to render the icon background / border, etc and the step line can avoid some of the issues we are seing and complexity in implementation.
🌍 Your Environment
- OS & Device: Windows 11
- Browser Chrome
- Version 146.0.7680.177
🐛 Bug Report
Set Windows to an uneven OS scale level such as 125% in Settings > System > Display.
Notice the stepper animation for the line when pressed (moving from hover to active) shows the line shifting but not changing size:
Compared to a even scale such as 100%:
Note: It seems to reproduce on the canvas page and the canvas page in isolation but does not reproduce for me on the docs page.
💁 Possible Solution
Apply transforms to prevent snapping to device pixels
Found a discussion on mdn (so Firefox, not Chrome which is where the behavior is seen) that says browsers using transforms try to align on device pixels and shows an example of using a small rotate to get the browser to avoid snapping to device pixel sizes. Tried it briefly and it seemed to help at the uneven scale size but cause artifacts at even sizes.
Consider moving shapes to SVG
Maybe using an SVG and CSS animations to render the icon background / border, etc and the step line can avoid some of the issues we are seing and complexity in implementation.
🌍 Your Environment