search

primefaces / primereact

The Most Complete React UI Component Library
https://primereact.org
MIT License
6.58k stars 990 forks source link

RadioButton: checked icon is not centered upon changing the screen scale #2863

Open AndrewZagovora opened 2 years ago

AndrewZagovora commented 2 years ago

Describe the bug

Open the Radiobutton component with default (100%) screen scale Check the radio button The alignment is proper: image

Change the screen scale to 110% The alignment is broken: image

Reproducer

No response

PrimeReact version

7.2.1

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome Version 101.0.4951.54 (Official Build) (64-bit)

Steps to reproduce the behavior

No response

Expected behavior

No response

melloware commented 2 years ago

What theme are you using?

Here is Showcase at 100% and 125%; https://primefaces.org/primereact/radiobutton/

100% image

125% image

melloware commented 2 years ago

Any update on this? Which theme etc?

AndrewZagovora commented 2 years ago

@melloware The theme is Matherial Indigo Light

125% works fine try 110%

here is the 110% with same theme you checked - the checkbox icon is lower then middle

image

melloware commented 2 years ago

Its possible that is just browser scaling math scaling it up to a odd number etc. This may not be fixable but any investigation or PR is welcome. But the CSS doesn't change on browser scaling its purely the browser doing math to increase the pixels.

melloware commented 2 years ago

Actually found this: https://github.com/carbon-design-system/carbon/issues/5163 It looks like it needs to use scale and not rem

https://github.com/carbon-design-system/carbon/pull/6097/files

melloware commented 2 years ago

Hmm here is mine in Chrome at 110%

image