IOS using refresher content blinks

Ionic Framework ionic-v3
1

I’m writing an Ionic2 app and I need to use ion-refresher to update list of items.
Each item in the list has thumbnail. Clicking on thumbnail creates modal with full image in it.
On IOS this click causes screen blink before modal will appear. This happens ONLY if using refresher component.

Here is the code example:

<ion-content padding>
  <ion-refresher (ionRefresh)="refreshList()" (ionPull)="ionPull($event)" (ionStart)="ionStart($event)" pullMin="100" pullMax="180">
    <ion-refresher-content
      pullingText="Pull to refresh" refreshingText="Refreshing...">
    </ion-refresher-content>
   </ion-refresher>

  <ion-list>
    <ion-item-sliding *ngFor="let receipt of receipts" #slidingItem>
      <ion-item>
        <ion-thumbnail item-left (tap)="expandImage(receipt)">
          <img src="{{receipt.receipt100_path}}">
        </ion-thumbnail>
        <h2>{{receipt.name}}</h2>
        <p>Updated at: {{receipt.receipt_updated_at | amCalendar }}</p>
      </ion-item>
      <ion-item-options side="right">
          ...some code here
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

Also, using sliding list gives very bad user-experience: when u try to slide item to reveal actions (in my case), refresher starts appearing, because during sliding of item ionPull event triggers many times (depending of the speed of sliding).

As a result, right now Refresher is not usable.
Please provide some help or feedback on this.

Thanks

Ionic version 2.0.0-beta.32
IOS 9.3

2

Could you try to replicate this in a plunkr?

3

It’s not visible in browser or Android device, only for IOS

4

Yes, but we can run plunkr on our devices. Just isolate the problem in a working plunkr and we can debug on a device.

5

Hello. Thanks for boilerplate.

Here is the plunker http://plnkr.co/edit/fCy48ZLHeDlcGid2z2Fp?p=preview

6

same problem I am getting is there any solution for it .this is working well on android but on ios its blinking

7

This issue is resolved in beta-11. Checked that personally. Plus, in beta-11 sensitivity and user experience is much better

8

I met with the same problem, and found that it was caused by an element with a large z-index. Can you provide the commit resolving this problem? I want to know why. Thanks!

9

Emm, I haven’t changed any css to check that. Just upgraded to beta-11, used refresher there and checked on real device

10

If u need the code - here is the html

<ion-header class="main-header">
  <ion-navbar>
    <ion-title>
      List of items
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  
  <ion-refresher (ionRefresh)="refreshList($event)" pullMin="120" pullMax="180">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

  <ion-list class="receipts-list">
    <ion-item-sliding *ngFor="let receipt of receipts" #slidingItem>
      <ion-item>
        <ion-avatar item-left (tap)="expandImage(receipt)">
          <img alt="Loading" [src]="receipt.receipt100_path">
        </ion-avatar>
        <h2>{{receipt.name}}</h2>
        <p>Updated at: {{receipt.receipt_updated_at | amCalendar }}</p>
        <div *ngIf="receipt.uploadedLocally" item-right danger class="message-danger">
          <ion-icon name="warning"></ion-icon>
          <div>Not Uploaded</div>
        </div>
        
      </ion-item>
      <ion-item-options side="right" *ngIf="!receipt.uploadedLocally">
        <button clear (click)="showEditDialog(receipt, slidingItem)" class="mod-bordered-l">
          <ion-icon name="create"></ion-icon>
          Edit
        </button>
        <button danger (click)="showDeleteDialog(receipt, slidingItem)">
          <ion-icon name="trash"></ion-icon>
          Delete
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>
11

I have also same issue, it’s not only happen on model, but blink also happen on action, alert, select alert, popover, some times on time of loading and some time when we push page…

12

Have the same issue with refresher. When I pull the list on iPhone, it stays static as if I didn’t pull it, then blinks and refreshes, however on android device and in browser works nice.

UPDATE: faced with the issue on Galaxy S4 as well

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.6.0
Xcode version: Xcode 8.2.1 Build version 8C1002

13

Any updates on this? Still happening on Ionic 3 ONLY on iOS devices! Really annoying and not production ready at all.

14

So you created a reproducible Plunkr and created an issue for Ionic so that the developers are aware of it and can actually fix it?

15

Hum no but OP did if I’m not mistaken? He even posted more code to help but nobody replied except even more people who would need help with the same issue. I thought of bumping this thread to find help, not some kind of bad attitude like yours. I will seek help elsewhere thank you.

16

You are the one that came in with:

So…

But for the case that you look in here anyway:

The OP was with ionic-angular 2.0.0-beta.32 and no link to a Github issue posted here. So of course I have to ask you if the problem is still reproducible and if there is anything to point the developers to. “me too” posts in a forum don’t really help much in getting bugs fixed, reproducible test cases for current versions of the framework and issues with clear description do.