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 [email protected]

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!

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