In ios, selecting item in ion radio group causes automatic scroll

[JoshuvaGeorge03]

Bug Report

Current behavior: when I select one of the items in the ion radio group, ion content scroll to down and i can't scroll up. Kindly find the attached video for the reference.

radio-issue.zip

Expected behavior: When I select it should stay in that position, should not scroll automatically.

Steps to reproduce: Start a sample project and put my code with some sample data. And run it in IOS device.

Related code:

<ion-content fullscreen>
<ion-list bg-transparent lines="none">
    <ng-container *ngFor="let product of newProductsAndVariants; let i = index">
        <ion-radio-group allowEmptySelection="true">
            <ion-list-header class="ion-padding-top">
                <ion-label>
                    <div fs25 white>{{product?.product?.languages[currentLanguage]?.name}}</div>
                    <div fs15 white padding-top-5 text-mixed-casing fw100> <span> {{product?.product?.languages[currentLanguage]?.description}} </span> </div>
                </ion-label>
            </ion-list-header>
            <ion-item lines="none" *ngFor="let variant of product?.product?.variants; let j = index">
                <ion-radio slot="start" mode="md" [value]="variant" (click)="totalTimeandPrice(i, $event.target.value, j)"></ion-radio>
                <ion-label class="ion-text-wrap">
                    <div fs20 white> {{variant?.languages[currentLanguage]?.variantName}} </div>
                </ion-label>
                <ion-label slot="end" class="ion-text-right">
                    <div fs20 white><span margin-right-20>{{variant?.duration}}
                            min</span><span>{{variant?.pricing[0]?.price}}</span></div>
                </ion-label>
            </ion-item>
        </ion-radio-group>
    </ng-container>
</ion-list>
</ion-content>

insert short code snippets here
```<ion-content fullscreen>
<ion-list bg-transparent lines="none">
    <ng-container *ngFor="let product of newProductsAndVariants; let i = index">
        <ion-radio-group allowEmptySelection="true">
            <ion-list-header class="ion-padding-top">
                <ion-label>
                    <div fs25 white>{{product?.product?.languages[currentLanguage]?.name}}</div>
                    <div fs15 white padding-top-5 text-mixed-casing fw100> <span> {{product?.product?.languages[currentLanguage]?.description}} </span> </div>
                </ion-label>
            </ion-list-header>
            <ion-item lines="none" *ngFor="let variant of product?.product?.variants; let j = index">
                <ion-radio slot="start" mode="md" [value]="variant" (click)="totalTimeandPrice(i, $event.target.value, j)"></ion-radio>
                <ion-label class="ion-text-wrap">
                    <div fs20 white> {{variant?.languages[currentLanguage]?.variantName}} </div>
                </ion-label>
                <ion-label slot="end" class="ion-text-right">
                    <div fs20 white><span margin-right-20>{{variant?.duration}}
                            min</span><span>{{variant?.pricing[0]?.price}}</span></div>
                </ion-label>
            </ion-item>
        </ion-radio-group>
    </ng-container>
</ion-list>
</ion-content>

**Other information:**
<!-- List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, etc. -->

**Ionic info:**

Ionic:

   Ionic CLI                     : 5.4.1 (C:\Users\Joshuva\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Capacitor:

   Capacitor CLI   : 1.2.1
   @capacitor/core : 1.2.1

Utility:

   cordova-res : 0.3.0
   native-run  : 0.2.2

System:

   NodeJS : v10.11.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.11.1
   OS     : Windows 10

[JoshuvaGeorge03]

Is there any update on this issue?

[liamdebeasi]

Thanks for the issue. Do you have a repo with the code required to reproduce this issue?

[JoshuvaGeorge03]

Thanks @liamdebeasi for replying. Sorry for late response

I was mentioned my code above.

is it enough? or do i need to create repo?

you can easily reproduce this bug, start a new blank project and put the above code in home page. and run it in ios.

It did not happened in android and web.

Best Regards, Joshuva george. M

[liamdebeasi]

@JoshuvaGeorge03 I am unable to reproduce the issue using the code snippet you have provided. Can you provide a simplified test case in a GitHub repo or a StackBlitz?

[JoshuvaGeorge03]

@liamdebeasi kindly check this repo link.

https://github.com/JoshuvaGeorge03/radio-group-issue

And let me know, if you need anything.

[liamdebeasi]

What version of iOS are you seeing this on? I am testing the repo on iOS 13.1 and am unable to reproduce the issue.

[JoshuvaGeorge03]

@liamdebeasi I am seeing it in ios version 12.4.

Did you checked the video i have attached?

[JoshuvaGeorge03]

any updated on this issue?

[liamdebeasi]

Apologies for the delay. I tested this on an iPhone 5s running iOS 12.4.2 and was still unable to reproduce this issue. If you place these radio groups in a blank starter app, are you able to reproduce the issue there?

[JoshuvaGeorge03]

@liamdebeasi Sorry for late response, i have been on vacation.

I have done some modification on the project. so, kindly get the latest and check please.

[JoshuvaGeorge03]

@liamdebeasi I am still having this issue on my iphone. could you please check this issue?

[JoshuvaGeorge03]

@liamdebeasi Our client using our app also facing this issue, they are using iphone X. kindly take a look at the problem and solve it.

[JoshuvaGeorge03]

@liamdebeasi Could you please look into this issue?

[JoshuvaGeorge03]

@liamdebeasi any update on this issue?

[liamdebeasi]

Hey there apologies for the delay. I was able to reproduce the behavior you described, but I do not see anything that would indicate this is a bug in Ionic Framework. Are you able to reproduce this issue in an Ionic starter application?

[JoshuvaGeorge03]

@liamdebeasi did you checked the repo I have provided to you? https://github.com/JoshuvaGeorge03/radio-group-issue

This is blank ionic starter app

[liamdebeasi]

I did check the repo. Is this issue still happening with the latest version of Ionic Framework?

[JoshuvaGeorge03]

@liamdebeasi I did not checked with latest ionic version.. I will check and let you know..

But do you know why this issue happens?

[liamdebeasi]

No I do not know why this is happening. My best guess is this is some iOS/WebKit quirk as Ionic Framework does not adjust the scroll offset of your content (other than when focusing inputs with scroll assist enabled).

[JoshuvaGeorge03]

@liamdebeasi I made some workaround to fix this issue.. but if this issue got fixed that would be wonderful..

[liamdebeasi]

Glad to hear you were able to make a workaround. While I am able to reproduce the behavior you originally described, I do not see anything that would indicate this is a bug in Ionic Framework. I am going to close this issue for now as there is nothing for me to fix.

As I mentioned previously, my best guess is this may be a WebKit quirk that is being triggered somehow. If you are able to pinpoint something the would indicate the scroll jumping is an Ionic issue, feel free to post more information here and I will be happy to take a look. Thanks!

[parodenas]

@liamdebeasi I made some workaround to fix this issue.. but if this issue got fixed that would be wonderful..

Hello, could you please tell which was the workaround you use?

[JoshuvaGeorge03]

@parodenas this issue happened because of fullscreen property on ion content.. so remove it, then issue won't happen.. this is one solution.

And another one solution is have one empty div with a height equal to --offset-bottom of ion-content..

Let me know, if u have any other doubts

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.