iOS bounce flicker glitch

[tobiasmuecksch]

Ionic version: (check one with "x") [x] 3.x

I'm submitting a ... (check one with "x") [x] bug report

Current behavior: When bouncing a page there's some strange flickering (see following video). I haven't found out yet what exactly on this page causes the flickering. But my current guess is, that the input fields with placeholders may be the cause.

This glitch does not appear in a PC browser (Safari for Mac e.g.). This only can be observed when you run the app on an iPhone (in my case iPhone 6)

In case you can't see the gif, I've additionally uploaded video right here: https://cl.ly/3K0X2T3X0z1l

Expected behavior: Well, the view should bounce without the strange flickering.

Steps to reproduce:

1. Clone the following repo: https://github.com/tobiasmuecksch/ionic3-overflow-flicker-bug
2. npm install
3. ionic cordova build ios --prod
4. Run it on an iPhone
5. Bounce at will

PLEASE do not give me advice like: "Just add the no-bounce parameter", because it does only suppress the bug and not fix it.

[jgw96]

Hello, thanks for opening an issue with us, we will look into this.

[aceton2]

i'm with Muecksch, experiencing the same behaviour here in my project (Ionic Framework Version: 3.1.1, iOS 10.3)

[chetanawate28]

hey guys , I also having same issues ( cordova 6..0 ,ionic 1.7.16 . ) If any one have idea related to this bug please let us know

[liamdebeasi]

For what it's worth, I've run into this issue before. In my case, it had something to do with the way the iOS WebView handles textboxes with placeholders. I got around it by faking the placeholders (i.e. placing text over the textbox and then hiding it when clicked). Not the most sustainable approach, so I'd be interested to hear if anyone else has some insight into this.

[tobiasmuecksch]

@liamdebeasi I can confirm, that this issue seems to be related to input fields with placeholders.

I also found out that this bug does not appear with ion-textarea (+placeholder).

[tobiasmuecksch]

The bug is still present on iOS 11 Dev-Beta 1.

[manucorporat]

Can you guys test latest version? 3.4 Also using WK might help, we strongly recommend it: https://github.com/ionic-team/cordova-plugin-wkwebview-engine

[liamdebeasi]

@manucorporat This issue is still occurring for me.

Ionic Framework 3.4.0 WKWebView Plugin 1.1.3

[tobiasmuecksch]

@manucorporat I can confirm what @liamdebeasi already said. I've even tested it on iOS 11 Beta 1.

This issue is still present - but a little less intense. I've updated the repo, so you can try it yourself!

https://github.com/tobiasmuecksch/ionic3-overflow-flicker-bug

[tobiasmuecksch]

@manucorporat @jgw96 Are you Ionic guys working on this? Is there anything we can help you with?

[manucorporat]

yeah, I can reproduce this issue, I am not entire sure why it happens, but I am looking at it

[tobiasmuecksch]

@manucorporat Thank you very much for your effort!

[tobiasmuecksch]

With Ionic 3.5.0 the bug got less intense but is still present. When you load the demo app and start scrolling the glitch at first seems to have disappeared. But when you click into a text field and then start scrolling again the bug is back again.

I've updated the repo, so you can try it yourself!

https://github.com/tobiasmuecksch/ionic3-overflow-flicker-bug

[SwenVogel]

Having exactly the same problem and can also confirm that this bug exists in the latest ionic version 3.5.0 tested on iOS 10.3.2.

Tested with and without cordova-plugin-wkwebview-engine.

Is there any progress on this topic, or workaround?

[drozdovas]

Having the same issue on ionic version 3.5.3. It has been affecting my app since Beta..

[tobiasmuecksch]

@manucorporat Anything new on this issue?

[liamdebeasi]

@tobiasmuecksch I ended up creating my own directive that resolves this issue. Using the directive, you can just do <ion-input type="text" ionPlaceholder="My Placeholder"></ion-input> and the bounce flicker glitch goes away. Also tried with a large number of textboxes on the screen and it seems to scale well.

I'm happy to release the code I have for this so it can be reviewed and potentially added to the framework. @manucorporat, thoughts?

[tobiaskam]

For me, a similar flickering shows when an element is simply updated by an interval, as shown below.

I could fix it with a workaround as follows:

1. using WKWebView

2. adding the following event listener: <ion-content (ionScroll)="scrollHandler($event)">

3. and adding the following in the component class:

   @ViewChild(Content) content: Content;
   scrollHandler(event) { this.content.scrollTop = this.content.scrollTop; }

[tobiasmuecksch]

@manucorporat Anything new on this issue?

[stewones]

same here, news?

[Golem765]

Encountered same bug in ionic 3.19, ios 11.2, description here stackoverflow

[4rsoluciones]

Same error with Ionic 3.9.2, any news?

[ahmadao]

Any news on this?

[aMUSiC]

I have the suspicion that this might be caused by the WkWebView plugin and not by ionic's javascript handling. The bounce glitch is more prominent when using VirtualScroll. Initially I thought that it might be an issue with VirtualScroll itself, however I wrote my own virtual scrolling implementation and the behavior is exactly the same.

Additionally, this behavior is not observable on either the browser or Android.

I'm using Ionic 3.9.2 and cordova-plugin-ionic-webview 1.1.16

EDIT: My suspicion was wrong. I tried switching it to UIWebView and the glitching is still there.

[ahmadao]

@aMUSiC I agree, this behavior is not on the browser or android, only on iOS.

[tobiasmuecksch]

@aMUSiC I've started serving my app on my Mac (ionic serve) and then opened my app in the iOS Safari. The bug is still there. So I guess (sadly) it's neither a Cordova nor a *WebView issue.

[tobiasmuecksch]

This is an issue that concerns more Apps than one would guess. I've seen many Ionic apps suffering from this issue.

[tobiasmuecksch]

Ionic 3.9.2, Cordova 8.0.0, iOS 11.2.2 This issue is still present on all iPhones. I've tested all iPhones since iPhone 5 (including X).

[stewones]

Yes me too 😞

On Tue, 23 Jan 2018 at 12:26 Tobias Mücksch notifications@github.com wrote:

Ionic 3.9.2, Cordova 8.0.0, iOS 11.2.2 This issue is still present on all iPhones. I've tested all iPhones since iPhone 5 (including X).

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic/issues/11844#issuecomment-359806194, or mute the thread https://github.com/notifications/unsubscribe-auth/AAr7k-4bbn4UBQZdyke5xea8cbLqpn-vks5tNev8gaJpZM4No-tF .

[ahmadao]

You can mitigate this issue a lot by using no-bounce

<ion-content no-bounce>

[m-stilling]

I have also been (im)patiently waiting for this to be fixed for quite a long time ... To me, having the bounce helps with the whole native-feeling of an app, therefore no-bounce isn't really an option in my eyes. I sure am considering it more and more, though ...

[stewones]

no bounce works only for fixed heights. in my case here, there are a large list of photos and this flickering is killing me

[stewones]

Any news @jgw96?

[Golem765]

I've found a way to stop flickering, yet it may be not applicable to all cases: change layout to use ion-list with ion-items. There is no flickering on ion-list and with a little of css such layout could look like any other

[tobiasmuecksch]

@ahmadao Only for contents that do not exceed the viewport height. See: https://github.com/ionic-team/ionic/issues/11584

[ahmadao]

Guys, I understand no-bounce prevents bouncing if the content is no longer than the viewport. I am not using it to prevent the bounce. For some reason it mitigates the flickering issue a lot to me. Try it and see.

[mhartington]

Looking at this issue. Please keep the comments constructive and on topic.

[tobiasmuecksch]

@ahmadao Thanks for the hint. In my case it doesn't mitigate the problem. Especially on pages with content that exceed the viewport height... @mhartington Thank you for your effort. I apologize; I've edited my comments accordingly.

[tobiasmuecksch]

I suspect that this issue has to do with input fields.

1. I've removed all <ion-input> fields from my app. Afterwards the issue disappeared
2. I've then replaced all <ion-input> tags with <input> tags. The issue got even worse (the flickering appeared more juddery).

Strangely enough, even only one input-field on one page affects all other pages.

[Golem765]

@tobiasmuecksch Please, see my question at SO, it could be reproduced without any inputs on pure ionic tabs starter

[tobiasmuecksch]

@Golem765 could you please provide us with a demo repo or zip?

[mhartington]

@thezakman Please do not post "+1" . This is 1) not productive and 2) Does not add anything new to the conversation. Thanks.

@tobiasmuecksch regarding text inputs, I can see something similar. I will look into the text input component and see what can be done.

[tobiasmuecksch]

@mhartington

I have to withdraw my earlier suspicion. It's not necessarily related to <ion-input> or <input>. I've been able to create an app with this glitch, without any inputs.

Video

https://cl.ly/3T0e3W1W2V2b

• ('EMAIL' and 'PASSWORD' are just labels. There are no input elements.)
• Video Speed is reduced by 10%

Code

You can find the code here: https://github.com/tobiasmuecksch/bounce-issue

[mhartington]

Odd, @tobiasmuecksch I copied what you had in that repo, but could not replicate it on my test

https://youtu.be/se3VdWyzZSI

[m-stilling]

@mhartington Here's the easiest way to replicate it (for me):

1. Have a page that is longer than the screen (not by a whole lot)
2. Be at the top of the page
3. Swipe all the way down (or up, for that matter) in one swipe
4. As soon as the overscroll takes over and it's about to bounce back, tap and hold on the screen (or just tap)

It appears that when you tab while the app is in the middle of bouncing back in on screen, it puts it back for a split second before resuming the animation. Sometimes it doesn't even resume the animation, it just stays at what would be the finished state of the animation.

Edit: Seems it doesn't even have to be before it's about to bounce back, that just worked better for me.

[aMUSiC]

This is rather weird as I managed to get my hands on two iPhone X's, so I run my app (which contains a scroller with images and no input fields whatsoever) on both the phones watching them side by side. On one iPhone X it was glitching consistently, on the other one it was not glitching at all!

[stewones]

here is my use case. the listing is async and increases when scroll reaches the bottom

https://vimeo.com/252568415

[tobiasmuecksch]

@mhartington Thank you for trying my repo. I've been really confused when I saw your video. So I re-tried on my iPhone X.

I found out that the glitch only appears when I touch the ion-card while scrolling (about the height of the SIGN IN Button).

When I touch the grey background while scrolling the glitch does not appear.

Video

https://cl.ly/0I2q3N1U0x2n

1. During the first 3 seconds I'm scrolling while touching the grey background.
2. Afterwards I start scrolling while touching the ion-card

[tobiasmuecksch]

@mhartington To investigate this issue further I've replaced the <ion-card>, <ion-card-content> and <ion-card-header> tags with <div> and custom classes to imitate the look.

Oddly the glitch is gone then, even if I touch the card-alike <div> while scrolling.

I had a quick look at the ionic code, but it'll take more time for me to get into the inner workings of ionic for debugging...

Code

See the ion-card-replacement branch of the bounce-issue repo: https://github.com/tobiasmuecksch/bounce-issue/tree/ion-card-replacement

Video

During the whole video I'm touching the card-alike <div> while scrolling. https://cl.ly/461g1P3N111D

[tobiasmuecksch]

@mich356c @stewwan Please have a look at your code. Which ionic components are you using? Do you have any <ion-card> on your glitching page, or else?

I mean any of these: https://ionicframework.com/docs/components/