Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Radio dot not in center on firefox #16039

Closed
Warix3 opened this issue Apr 12, 2019 · 12 comments

Comments

Projects
None yet
4 participants
@Warix3
Copy link

commented Apr 12, 2019

  • I have searched the issues of this repository and believe that this is not a duplicate.

There were issues like this but all closed because you couldn't reproduce, or some other problem.

Reproduction link

https://ant.design/components/radio/

Steps to reproduce

No steps needed, just open link and look at radio button, when it's active the blue dot is not in center.

What is expected?

Chrome

What is actually happening?

Firefox

Environment Info
antd 3.16.2
React Version used on https://ant.design/components/radio/
System Windows 10 Pro 1809
Browser Firefox 66.0.2 (64-bit) and Firefox developer edition 67.0b9 (64-bit)
Resolution 1920x1080
Browser scaling 100%
Windows font scaling 100%

If we remove border roundness the difference becomes very clear:
Firefox vs Chrome
I have attempted to fix this by increasing css scaling function to .876 instead of .875, it becomes centered but also it becomes thicker on both firefox and chrome:
Firefox vs Chrome with .876 scaling
And without border roundness for clearer difference:
Firefox vs Chrome with .876 scaling and no round borders

It gets centered with .876 but it becomes thicker, ideally we need a solution without changing css scale. It could work with scaling if you can make the outer pixel border half transparent like in chrome, but I'm sure there is a more elegant solution.

@afc163

This comment has been minimized.

Copy link
Member

commented Apr 12, 2019

@Warix3

This comment has been minimized.

Copy link
Author

commented Apr 12, 2019

I've seen those issues but they haven't provided a solution. They were closed because you were unable to reproduce the issue. I tried to fix the issue myself as you can see in the submission but I'm not a css expert and I stuck there. I was hoping I can help you to reproduce the issue.
I just tested with microsoft edge and it's not in the center there either:
Edge

Maybe you can reproduce it on edge if not on firefox? The root cause is probably the same. Also have you tried using the exact OS version? Maybe it's an issue with Windows 10 Pro 1809

@afc163

This comment has been minimized.

Copy link
Member

commented Apr 12, 2019

I am using MacOS 10.14.3 and Firefox 66.0.3, I can't find your envioronment to reproduce the problem now.

image

@Warix3

This comment has been minimized.

Copy link
Author

commented Apr 12, 2019

Your result seems to be a bit bigger. I'm assuming you are using resolution of more than 1920x1080. Have you tried with 1920x1080 resolution?

@Warix3

This comment has been minimized.

Copy link
Author

commented Apr 12, 2019

I just tried with 4k (3840x2160) And I got the same result as you. So it's probably a problem with resolution. I think you need to use 1920x1080 resolution to see the issue.

@zjffun

This comment has been minimized.

Copy link
Contributor

commented Apr 12, 2019

https://codepen.io/1010543618/pen/vMZmKb?editors=0110

This seems to be a firefox rendering bug.

In firefox 66.0.3 : not in the center
图片

emm... Interesting
图片
图片

In chrome 72.0.3626.119 : in the center
图片

@weekly-digest weekly-digest bot referenced this issue Apr 14, 2019

Closed

Weekly Digest (7 April, 2019 - 14 April, 2019) #16069

1 of 9 tasks complete
@zombieJ

This comment has been minimized.

Copy link
Member

commented Apr 15, 2019

Tested found the real size is 7px (transform: scale(0.875)):

屏幕快照 2019-04-15 下午3 07 13

code: https://github.com/ant-design/ant-design/blob/master/components/radio/style/index.less#L119

ref commit: https://github.com/ant-design/ant-design/blame/df356a586c194e1050d6e5c66966dd6931e458d1/components/radio/style/index.less

GitHub
🌈 A UI Design Language. Contribute to ant-design/ant-design development by creating an account on GitHub.
GitHub
🌈 A UI Design Language. Contribute to ant-design/ant-design development by creating an account on GitHub.
@zombieJ

This comment has been minimized.

Copy link
Member

commented Apr 15, 2019

Is that safe to remove this transform? @afc163

@afc163

This comment has been minimized.

Copy link
Member

commented Apr 16, 2019

I don't think so, it is used for animation.

@zombieJ

This comment has been minimized.

Copy link
Member

commented Apr 16, 2019

@Warix3 , could you test on your side to modify the transform: scale(0.875) to transform: scale(0.75) and have a look?

@Warix3

This comment has been minimized.

Copy link
Author

commented Apr 16, 2019

@zombieJ using scale(0.75) makes it centered but also smaller. And using scale(0.876) makes it also centered but bigger. This is for resolution 1920x1080. I don't know for other resolutions.

@zombieJ

This comment has been minimized.

Copy link
Member

commented Apr 16, 2019

@Warix3 ,
We changed size from 7px to 8px. It will resolve this but little large than before : )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.