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

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

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 24 (8 by maintainers)

Most upvoted comments

I tested on iOS and was not able to replicate.

https://youtu.be/z0SfkYm1xCo

Has it been fixed?

me too