bug: iOS: ion-slide elements will not render until a touch event happens

[wilk-polarny]

Bug Report

Ionic version:
[x] 4.9.0

Current behavior:
When using <ion-slides> within an Angular project, sometimes slide contents will not be rendered. Especially when they are composed out of more complex components and changing changing based on bound variables.

The component will not render itself until a touch event happens. Changes go undetected by Angular and there are also no events (mutation observer) fired by the Swiper API (if observers and observers for children are enabled).

Once I manually trigger a touch event, the components within <ion-slide> elements will properly render.

Expected behavior:
Slides, sub components and their children should always render.

Steps to reproduce:

• Download the latest conference app as a base
• Integrate Cordova and the ionic wkwebview plugin >= 4.0.1
• Do an optimized prod (--prod) build
• Integrate slides as below and wait for the render problems to happen (you may need to try a few times - thus I integrated everything into the schedule modal)

Related code:

  <ion-slides zoom="true">
    <ion-slide>
      <img src="assets/img/ica-slidebox-img-1.png" >
    </ion-slide>
    <ion-slide>
      <img src="assets/img/ica-slidebox-img-1.png" >
    </ion-slide>
    <ion-slide>
      <img src="assets/img/ica-slidebox-img-1.png" >
    </ion-slide>
  </ion-slides>

Other information:
This may be related to #19311

This does not happen with text only components, but with any images and SVGs.

This behaviour weirdly also extends to other components than elements. We have a custom countdown timer which exposes the same behaviour (which may or may not be related to this - but if - it's likely some weird Angular problem?!)

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.1 (/Users/Wilk/.nvm/versions/node/v10.16.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.9.1
   @angular-devkit/build-angular : 0.803.5
   @angular-devkit/schematics    : 8.3.5
   @angular/cli                  : 8.3.5
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.0.1, (and 5 other plugins)

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   Android SDK Tools : 25.2.2 (/Users/Wilk/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v10.16.3 (/Users/Wilk/.nvm/versions/node/v10.16.3/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.3 Build version 10G8

[omardoma]

Same Problem

[gitliyu]

I have a similar problem. The element is in the correct position, but does not display properly

[wilk-polarny]

I cannot reproduce anymore since upgrading to 4.11.8 - I cannot tell whether this has been silently fixed in one of the versions between 4.9.0 and the latest

[wilk-polarny]

Also cannot reproduce in Ionic 5.x

@gitliyu and @omardoma, can you confirm?

[wilk-polarny]

Closing this issue, since it is resolved for me and there is no feedback from the mentioned users.

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