bug: ion-icon and ion-row disappear after ion-rage change

[ops5]

Bug Report

Ionic version: [x] 4.x

Current behavior: When i slide the ion-rage, the visibility of the elements ion-icon and ion-row change to 'visibility none' and disappear from screen. It only happens in IOS, in the browser (chrome) It works fine!!!

Expected behavior: Like in the browser, when i slide the ion-range the stars need to updated according to the ion-rage value.

Related code: HTML:

<ion-content class="main-view">
  <div class="overlay" (click)="closeModal()"></div>
  <div class="modal_content">
    <h3 text-center>{{ 'SelectPlayerRate' | translate }}</h3>
    <div>
      <button class="button-pos-fix"
        (click)="closeModal()">
        <ion-icon name="close-circle"></ion-icon>
      </button>
    </div>

    <ion-grid>
      <ion-row text-center>
        <ion-col *ngFor="let star of Stars; let index = index;" (click)="onSelectRate(star, false)"
          class="star-gold">
          <ion-icon [name]="getStarName(star)"></ion-icon>
        </ion-col>
      </ion-row>
    </ion-grid>

    <div text-center>
      <div>
        <b>{{ 'ManualSelectionSlider' | translate }}</b>
      </div>
      <br>
      <ion-badge class="ion-badge-slider">{{Rate/2}}</ion-badge>
      <ion-item>
        <ion-range [(ngModel)]="Rate" (ionChange)="onNumberOfStarsChange($event.detail.value)" min="2" max="10"
          step="1">
          <ion-label slot="start">1</ion-label>
          <ion-label slot="end">5</ion-label>
        </ion-range>
      </ion-item>
      <ion-button (click)="confirmSelection()"> {{ 'Select' | translate }} </ion-button>
    </div>
  </div>
</ion-content>

Component:

import { Component, OnInit } from '@angular/core';
import { NavController, ModalController } from '@ionic/angular';
import { NavParams } from '@ionic/angular';

@Component({
  selector: 'app-modal-stars',
  templateUrl: './modal-stars.component.html',
  styleUrls: ['./modal-stars.component.scss'],
})
export class ModalStarsComponent implements OnInit {

  Rate = 2;
  CurrentLanguage = 'en';
  Stars = [2, 4, 6, 8, 10];

  constructor(public navCtrl: NavController, public modalController: ModalController, private navParams: NavParams) {
    if (navParams.get('myParam')) {
      this.onSelectRate(navParams.get('myParam') * 2, true);
    }

    if (navParams.get('CurrentLanguage')) {
      this.CurrentLanguage = navParams.get('CurrentLanguage');
    }
  }

  ngOnInit() {
  }

  getStarName(value: number) {
    if (value > this.Rate + 1) return 'star-outline';
    if (value === this.Rate + 1) return 'star-half';
    if (value <= this.Rate) return 'star';
  }

  closeModal() {
    this.modalController.dismiss();
  }

  onSelectRate(rate: number, configStars: boolean) {
    this.Rate = rate;
    if (!configStars) {
      this.dismiss(rate);
    }
  }

  onNumberOfStarsChange(value) {
    if (value) {
      this.Rate = value;
      this.onSelectRate(value, true);
    }
  }

  confirmSelection() {
    this.dismiss(this.Rate);
  }

  dismiss(rate: number) {
    const data = {
      rate: rate / 2,
      rateDisplay: (this.Rate / 2).toString() + ' ★'
    };
    this.modalController.dismiss(data);
  }
}

Other information:

If i play with the visibility property and change it to 'visible' it's work again.

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.4 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.7.4
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 8 other plugins)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   ios-sim : 8.0.1
   NodeJS  : v10.16.0 (/usr/local/bin/node)
   npm     : 6.10.3
   OS      : macOS Mojave
   Xcode   : Xcode 10.3 Build version 10G8

[ops5]

I found the bug, ion-range doesn't work inside modal!!! Please fix it!

[liamdebeasi]

Thanks for the issue. Is this still an issue with the latest version of Ionic Framework? If so, please provide a repo with the code required to reproduce this issue.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!