Semantic-ui-react: Chrome v70 dynamically generated radio buttons in a modal causing CSS issue

[gabrielruss]

Bug Report

Steps

• Ensure that you are importing Semantic CSS in your project.
• Ensure you are using Chrome v70 or higher

1. Open the Modal
2. Select any radio button in group 1
3. Select any radio button in group 2
4. Select any of 5-10 on group 3

Expected Result

Radio button gets the "checked" CSS class and shows in the UI as checked

Actual Result

Radio button gets the "checked" CSS class but it flashes as checked and then disappears and is no longer checked in the UI. The internal state of the radio button is also correct.

Version

semantic-ui-css: "2.3.3",
semantic-ui-react: "0.82.2"

Testcase

https://codesandbox.io/s/rmwl7393vp

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

Please add an example on codesandbox.

[gabrielruss]

@layershifter ok I added the codesandbox link. Thanks.

[layershifter]

Will check it tomorrow, I'm not sure that the issue in SUIR, will take a look

[layershifter]

Confirmed issue. I was able to reproduce it only in Chrome.

However, I don't know how we can to fix a browser bug from our side. @gabrielruss any ideas?

[gabrielruss]

@layershifter I am not sure how to proceed. This only occurs when using the semantic-css.

[jonsvez]

It is not a chrome issue, I have tested in on firefox and opera also, they have same behaviour. The component seems to have the correct state and the correct css, but the radio is not checked. It happens for dynamically generated radio buttons only, even without a modal being involved.

[jonsvez]

Nvm, was a bug in my code, seems the issue is only present in modals

[jaynetics]

we also encountered this.

i noticed that the problem only occurs after the modal has been scrolled.

it does not occur in the given test case if you simply zoom out far enough so that the whole modal is visible. here is a more minimal test case: https://codesandbox.io/s/jz1qvyx2l9

edit: i can confirm it does not happen in desktop Safari, Edge, Firefox, Firefox for Android, or Samsung Internet, but it does on Chrome, Chrome for Android, and Firefox Focus.

[offcall]

We have a similar problem( Are there any solutions?

[etiennecaldo]

Same here

[JeremyLandi]

Not sure if this will help anyone, but I found a fix for this here. Basically, add the following in your CSS. (It doesn't have to be in the body).

body {
-webkit-transform: translateZ(0);
}

OR

body {
-webkit-backface-visibility: hidden;
}

[NclsL]

Little late and little hacky, but the solution that seems to be working for me is setting the following CSS rule. Using Semantic-ui-css 2.4.1 & Semantic-ui-react 0.87.3

.ui.checkbox input:checked~.box:after, .ui.checkbox input:checked~label:after {
  content: '\e800' !important;
}

[layershifter]

I checked this one and can't reproduce it anymore with Chrome 85 and Semantic UI React 1.1.1.
https://codesandbox.io/s/recreating-modal-issue-9xvsn

Closing for now, please let us know if the issue is still reproducible.