Try zoom instead of css transform for rendering xsmll icons on low de…#380
Try zoom instead of css transform for rendering xsmll icons on low de…#380ChristianAlbrecht wants to merge 1 commit intomasterfrom
Conversation
ChristianAlbrecht
requested review from
knime-ghub-bot
and removed request for
a team
|
There was a problem hiding this comment.
Pull request overview
This PR adjusts how xsmall icons are rendered on low-density displays, aiming to reduce subpixel-related SVG rendering artifacts by changing the scaling approach in the icon CSS.
Changes:
- Tightened the low-density screen media query threshold from
1.5dppxto1.25dppx. - Replaced
transform: scale(...)withzoom: ...for scalingxsmallicons and addedshape-rendering: crispEdgesin that branch.
Comments suppressed due to low confidence (1)
packages/components/src/accessories/Icon/styles.css:25
- The explanatory comment still says the solution is to apply a “CSS transform”, but the implementation now uses
zoom(andshape-rendering: crispEdges). Update the comment so it accurately reflects the current approach and rationale.
/* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
rendering issues which manifests in misaligned or 'jumping' svg content.
Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
CSS transform. Thus the position of the SVG elements stays intact. */
| var(--kds-border-width-icon-stroke-s) / var(--scaling-factor) | ||
| ); | ||
| transform: scale(var(--scaling-factor)); | ||
| zoom: var(--scaling-factor); | ||
| shape-rendering: crispEdges; |
There was a problem hiding this comment.
zoom is a non-standard CSS property and is not supported in Firefox. In browsers that ignore it, this media-query branch will still apply --icon-width/height: 0.75x (and the adjusted stroke width) but won’t scale the element down, so xsmall icons will render at the wrong size. Consider adding a @supports (zoom: 1) guard with a transform: scale(...) (or other) fallback for browsers without zoom, or restructure so the fallback keeps the intended visual and layout size.
|
| ); | ||
| transform: scale(var(--scaling-factor)); | ||
| zoom: var(--scaling-factor); | ||
| shape-rendering: crispEdges; |
There was a problem hiding this comment.
cripsEdges works only for rectangular icons
| --icon-stroke-width: var(--kds-border-width-icon-stroke-s); | ||
|
|
||
| @media (max-resolution: 1.5dppx) { | ||
| @media (max-resolution: 1.25dppx) { |
There was a problem hiding this comment.
Does not seem to change anything for me
Do not merge yet! Needs some testing/verification yet if the proposed changes actually fix something or not.