Ionic-framework: Duplicated ion-item content after pull-down refresh

[petrot]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I have a tabbed page, on the first tab there are two segments. On the first segment there is no problem. The second segment is a large html content, and when I scroll down to the bottom of the page, there is a copy of the current ion-item.

I have recorded the bug: https://www.youtube.com/watch?v=2jj5kBQ4de4

Expected behavior:
No duplicated content on scroll.

Steps to reproduce:

Related code:

<ion-content class="gray-content">
    <ion-refresher *ngIf="infoSegment === 'info'" (ionRefresh)="refreshCacheData($event)">
        <ion-refresher-content
            pullingIcon="arrow-dropdown"
            pullingText="Húzd le az adatok frissítéshez!"
            refreshingSpinner="ios"
            refreshingText="Frissítés...">
        </ion-refresher-content>
    </ion-refresher>

    <div *ngIf="!cache.code" class="message-container">
        <div class="message-text">
            <ion-spinner name="ios"></ion-spinner>
            <div class="ion-spinner-label">adatok letöltése</div>
        </div>
    </div>

    <ion-list class="bottom-border-list" *ngIf="cache.code" no-lines>
        <div [hidden]="infoSegment !== 'info'">
            <ion-item class="selectable" text-wrap><h3>Név:</h3> {{cache.name}}</ion-item>
            ... items with no problems ...
            <ion-item><h3>Tárolt adatok frissítve:</h3> {{cache.lastCacheUpdate}}</ion-item>
        </div>

        <div [hidden]="infoSegment !== 'description'">
            <ion-item text-wrap>
                <div [innerHTML]="cache.fulldesc | trustedHTML"></div>
            </ion-item>
        </div>
    </ion-list>
</ion-content>

Other information:
angular version: 4.1.3
ionic-native-*: 3.12.1

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : https://registry.npmjs.org/@ionic/app-scripts/-/app-scripts-1.3.7.tgz
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.1.0 browser 4.1.0 ios 4.3.1
    Ionic Framework                 : ionic-angular 3.4.2

System:

    Node       : v6.9.4
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 5.0.13
    npm        : 5.0.3

[AmitMY]

This is interesting. Does this happen on browser as well or only on device (not the bounce, but is the element duplicating?)
Also, any reason it is inside an ion-item?

[petrot]

Only on iOS device. I changed the 2nd block to a long plain text and the problem still exists. With short text, there is no problem. With long plain text, the 1st tab content stucks under the second tab (with and without ion-item tag).

[jgw96]

Hey @petrot , could you share a repo we could use to reprdouce this issue?

[petrot]

Hi @jgw96, ok, please give me an email address.

[jgw96]

ahh you can just throw it up on github and post the link here (: All we need is just a minimal repo with only the minimal code needed to repro the issue.

[petrot]

I can't upload a minimal repo, it's a huge private project :|

[petrot]

I tryed older versions: with ionic-angular 3.3.0 everything works fine. The bug appears with 3.4.0!

[anrip]

me too

[mhartington]

@petrot Please try to recreate the error in a smaller demo that can be uploaded, same for you @anrip.

I will note, that our docs say to not have an *ngIf on the ion-refresher, which you appear to have.

http://ionicframework.com/docs/api/components/refresher/Refresher/

Note: Do not wrap the ion-refresher in a *ngIf. It will not render properly this way. Please use the enabled property instead to display or hide the refresher.

[petrot]

@mhartington @jgw96 @AmitMY here is a small demo for the bug. As I wrote, in my main app the bug appears with ionic v3.4.0 (with v3.3.0 there is no bug).

This demo app uses v3.4.2:
https://github.com/petrot/ionic-tab-bug

• I ran on iOS device, then click to "Desc" tab and scroll up&down.

[jgw96]

@petrot, thanks for the repo. I can confirm that I can reproduce this on iOS but not on Android or desktop chrome. We will look into this.

[petrot]

@jgw96 OK, thank you!

[anrip]

Has it been fixed?

[AmitMY]

@anrip unfortunately, this was not yet addressed.

[petrot]

Hi guys, is there any news about this bug?

[petrot]

Hu guys!

I tried the new ionic v3.7, but the bug still exists. BUT I tried to find the solution and I realized, that the duplicated content not appers when I remove the ion-refresher. So the problem's root is that component.

As the documentation suggests, I tried to use the "enabled" attribute to hide it when I select the long segment, but it not worked. Then I tried to put the refresher code into a container div and apply an ngIf onto it. Not worked...

Now I have no idea, how can I apply the refresher ONLY the left segment and hide it when I choose the right one. Do you have any trick for it?

[s1lviu]

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 2.1.4-201709131805
    Cordova Platforms  : android 6.3.0 ios 4.5.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    ios-deploy : 1.9.2 
    ios-sim    : 5.0.8 
    Node       : v8.6.0
    npm        : 5.3.0 
    OS         : macOS Sierra
    Xcode      : Xcode 9.1 Build version 9B55 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

I have the same problem on a normal page - only on iOS.

[robli298]

has it be fixed already?

[petrot]

@orobsonpires no, the bug still exists :(

[mhartington]

Hi there! Im not able to replicate this with the current version of the framework. Using the sample project provided by @petrot and new starter app base from the cli, this no long seems to be an issue.

[petrot]

@mhartington please reopen the issue, the bug still exists with iOS builds! I checked today (with the latest ionic sources).
There aren't any problem with android builds and in the browser.

[mhartington]

I tested on iOS and was not able to replicate.

https://youtu.be/z0SfkYm1xCo

[petrot]

ok, thanks!

[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.