After upgrade to 3.8.0, texts of action sheet's are displayed with a delay

[peterpeterparker]

Ionic version: (check one with "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

Current behavior:
After the upgrade to ionic-angular 3.8.0, when I test my app on the same iPhone 6s and same app, no other code change, when action sheets are displayed, their texts are presented with a delay of 1 or 2 seconds.

Action sheets appears -> 1/2 seconds delay -> Action sheets text appears

Expected behavior:
This delay should not exists. Text of action sheets should be displayed in the same time as action sheet.

Steps to reproduce:

• Use an action sheet with ionic-angular 3.8.0 on a real iPhone 6s with iOS 11

Related code:

Other information:

cli packages: ()

@ionic/cli-utils  : 1.15.2
ionic (Ionic CLI) : 3.15.2

global packages:

cordova (Cordova CLI) : 7.1.0 
Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.3.0 ios 4.5.2
Ionic Framework    : ionic-angular 3.8.0

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.2 
ios-sim           : 5.0.13 
Node              : v8.8.1
npm               : 5.5.1 
OS                : macOS Sierra
Xcode             : Xcode 9.0 Build version 9A235 

Environment Variables:

ANDROID_HOME : /Users/me/Library/Android/sdk

Misc:

backend : pro

P.S.:

I use WkWebView

[mhartington]

Can you please provide a demo/example app? We've tested this out in the conference app, but could not see a delay

[peterpeterparker]

@mhartington freak I meant action sheets not popover (what a day...)

give me 5 I try to reproduce it with a minimal repo

[peterpeterparker]

@mhartington here you go

 git clone https://github.com/peterpeterparker/ionicPopoverDelay
 npm install
 ionic cordova build ios --prod
 run on an iPhone 6s / iOS 11 
 in the app, click "Open action sheet"

Got it, the delay occurs if you don't specify a title to the action sheet

let actionSheet = this.actionSheetCtrl.create({
  // title: 'Modify your album', <-- Omitting this option resolve in a delay of displaying the text
  buttons: [
      ....

P.S.: Just downloaded my app from the store to be 100% sure that this delay wasn't already there with previous version of ionic-angular and could confirm, this delay only appears after the update to 3.8.0

[mhartington]

Weird, ok, I can confirm this. Seeming it too with your demo. Will look into it and mark this for 3.9.0, as this is a regression.

[jayordway]

I have this issue after updating to 3.8.0 as well.

[danielcrk]

I had two actions sheets in my app, one had this issue, one didn't. The one that worked fine had a title, the one with the delay problem didn't.

I added a title and the delay disappeared. Not sure if that is the actual reason tho, but might give a clue.

[peterpeterparker]

@brandyscarney @mhartington do you think you will be able to fix this for 3.9.0? can I give a hand by testing or something?

[brandyscarney]

Thanks everyone and sorry for the delay on this! I've released a nightly with a fix:

npm install --save --save-exact ionic-angular@3.9.1-201711081842

We're hoping to release a 3.9.2 version soon with this in it. Please let me know if you're running into any issues with the nightly.

The issue was with the added -webkit-overflow-scrolling: touch, so we have decided to temporarily remove it. There were a few scenarios going on:

1. Not enough buttons to cause overflow, without title: flickering caused by the -webkit-overflow-scrolling: touch
2. Not enough buttons to cause overflow, with title: no flickering because the -webkit-overflow-scrolling: touch was not working, this was caused by something related to the action sheet title being a block element. Changing it to an inline element or inline block enabled the inertia scrolling.
3. Enough action sheet buttons to cause overflow: no flickering, inertia scrolling worked fine.

[peterpeterparker]

thx for the fix and explanation @brandyscarney

I updated my app and tested it quickly, it really improved the situation, the texts of almost all my action sheets are now displayed any delay.

I just observe one more delay on one particular action sheet, but strangely, if I go to another page, load a "non problematic" action sheet, go back to the one where I saw the delay, open it again, I'm not gonna face the delay again...weird

[MikePaer]

I updated to ionic-angular 3.9.2 and confirmed the issue is fixed on my iOS device. Thanks!