Open GuptaAman08 opened 1 month ago
Thanks for the issue! This issue has been labeled as needs reproduction
. This label is added to issues that need a code reproduction.
Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.
For a guide on how to create a good reproduction, see our Contributing Guide.
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
Using ionic-based web app
child.component.html
```child.component.css
``` .feedback-container { border-radius: 5px; text-align: left; .title-container { padding: 15px; border-bottom: 1px solid #cccccc; font-size: 16px; } h2.title { font-size: 16px; color: #000; font-weight: 400; } .icon { padding: 16px; text-align: center; } .btn.btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--primary-contrast); width: 75%; font-weight: 300; font-size: 14px; } .submit-button { letter-spacing: 2px; } .feedback-shared { width: 100%; text-align: center; flex: 1 1 auto; h3 { color: var(--primary); font-weight: normal; font-size: 18px; } .cursor-pointer { color: var(--primary); } } .feedback-radio ~ .selected { display: none; } .feedback-radio:checked ~ .selected { display: initial; cursor: default; } .feedback-radio:checked ~ .unselected { display: none; } .feedback-radio:hover:not(:checked) ~ .selected { display: initial; cursor: pointer; } .feedback-radio:hover:not(:checked) ~ .unselected { display: none; } } /* HIDE RADIO */ [type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .feedback-success { border-radius: 50%; width: 38px; height: 38px; background: #ccc; position: relative; left: 46%; & > img { margin-top: 10px !important; } } .h-146px { height: 146px !important; } @media (max-width: 280px) { .feedback-container { .custom-ml-3-280px { margin-left: 1rem !important; } } } ```I am facing the following problem on iPhone Safari.Chrome browser rest every other place its working fine may be it android, desktop, etc.
Expected Behavior
Ideally the first time a user checks the radio the corresponding smile should also get selected as it is behaving correctly on Android and Desktop browsers.
Can Someone please help me understand where is the problem ?? And how to fix it ??
Steps to Reproduce
Code Reproduction URL
Private Repository
Ionic Info
Ionic: Ionic CLI : 6.20.4 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : not installed @angular-devkit/build-angular : 15.2.9 @angular-devkit/schematics : 12.1.4 @angular/cli : 15.2.9 @ionic/angular-toolkit : 4.0.0
Capacitor: Capacitor CLI : 3.2.5 @capacitor/android : not installed @capacitor/core : 3.2.5 @capacitor/ios : not installed
Utility: cordova-res : not installed globally native-run (update available: 2.0.1) : 1.5.0
System:
NodeJS : v14.17.3 (/Users/rajivkulkarni/.nvm/versions/node/v14.17.3/bin/node) npm : 6.14.13 OS : macOS
Additional Information
Can Someone please help me understand where is the problem ?? And how to fix it ??