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] Centering issue in Safari #19846
Comments
@joshwooding Thanks for the confirmation, the solution seems simple: apply the scale transformation to the overlapping svg elements. |
Do you confirm the following? diff --git a/packages/material-ui/src/Radio/RadioButtonIcon.js b/packages/material-ui/src/Radio/RadioButtonIcon.js
index 8316fe4ed..e8746b1aa 100644
--- a/packages/material-ui/src/Radio/RadioButtonIcon.js
+++ b/packages/material-ui/src/Radio/RadioButtonIcon.js
@@ -9,7 +9,7 @@ export const styles = theme => ({
root: {
position: 'relative',
display: 'flex',
- '&$checked $layer': {
+ '&$checked $dot': {
transform: 'scale(1)',
transition: theme.transitions.create('transform', {
easing: theme.transitions.easing.easeOut,
@@ -17,7 +17,11 @@ export const styles = theme => ({
}),
},
},
- layer: {
+ checked: {},
+ background: {
+ transform: 'scale(1)',
+ },
+ dot: {
left: 0,
position: 'absolute',
transform: 'scale(0)',
@@ -26,7 +30,6 @@ export const styles = theme => ({
duration: theme.transitions.duration.shortest,
}),
},
- checked: {},
}); Maybe with a comment too? |
Can confirm that worked :) Implementation comment for someone who will take this on: We probably don't want to change layer to dot currently just in case it breaks styles. It might be something to include in v5 |
Well, it's a private component |
Do we classify the CSS it exposes as private then? |
As far as I know, developers can't interact with the style of private components, the class names are non-deterministic, not accessible with the theme. |
Hey, can I work on this? |
@parthjawale Sure! Hopefully the first of many :) |
Great and thanks! |
@joshwooding I tested it on my iPhone 11 Pro. For some reason all radio buttons behave differently. @oliviertassinari The scale transformation fix seems to work sometimes and sometimes not. Working on a fix. |
@parthjawale Do you have an example when the scale(1) approach doesn't work? |
Hey folks, Do you have any suggestion how I can fix it in my project until this issue will be fixed in upcoming release? Thank you in advance. |
@YuryShkoda you should be able to apply the fix in your theme using overrides. I’ll post a code snippet later. |
@YuryShkoda Do you want to submit a pull request with the proposed fix :)? #19846 (comment) |
@oliviertassinari I've been trying to implement fix, but it was working for some screen resolutions only and I have limited options for tests using real devices, that is why I'm afraid to bring more harm than use. And I have too many radio buttons across my project to risk. |
@YuryShkoda Sorry it took so long. https://codesandbox.io/s/material-demo-sueb1 - but if you think the fix above won't work then I'm not sure this will work for you. Also the css selector is fragile so use at your own risk :) |
Just tried the fix using scale() and it looks perfect. |
Could I try this one? |
Dot in radio button is not centered in Safari for 13 and 15 inches screens. On iphone (checked on iphone Xs), chrome and firefox the dot is perfectly centered.
Steps to Reproduce 🕹
That is how I style my radio button:
Live example of this issue can be found here: https://www.erudicat.com/heuristic-question-147 or https://www.erudicat.com/monte-carlo-analysis-question-337
Context 🔦
The majority of css rules in my project are scoped to particular components and the fact that I have such issue only in one browser make me assume that the issue is probably with MUI.
Thank you in advance!
Your Environment 🌎
The text was updated successfully, but these errors were encountered: