bug: ion-segment ios mode not working on android 5

[SSuarezBrooktec]

Bug Report

Ionic version: [x] 4.x

Current behavior: Ion-Segment is not working properly

Expected behavior: If i click on ion-segment must work.

Steps to reproduce: Click on ion-segment, with 2 segments up and down in the same app

Related code:

A sample application via GitHub https://github.com/SSuarezBrooktec/Ionic5_ion_segment_error

<div id="container">
  <ion-segment mode="ios">
    <ion-segment-button value="friends">
      <ion-label>Friends</ion-label>
    </ion-segment-button>
    <ion-segment-button value="enemies">
      <ion-label>Enemies</ion-label>
    </ion-segment-button>
  </ion-segment>
</div>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/Users/sergio/.nvm/versions/node/v13.0.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.4
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0

Utility:

   cordova-res : 0.9.0
   native-run  : 0.3.0

System:

   NodeJS : v13.0.1 (/Users/sergio/.nvm/versions/node/v13.0.1/bin/node)
   npm    : 6.13.7
   OS     : macOS Catalina

Here you can see that if the app has an upper tab and a lower tab. It does not work on Android 5

[SSuarezBrooktec]

The ion tab bar is also not working properly

[liamdebeasi]

Thanks for the issue. Are you testing this on an emulator or a physical device?

[SSuarezBrooktec]

Thanks for the issue. Are you testing this on an emulator or a physical device?

Both, and it don't work in physical with 5.0.1 we try to update webview but not work anyway

[NikolaPeevski]

@SSuarezBrooktec https://github.com/ionic-team/ionic/issues/20618#issuecomment-591462771 Probably the same issue ?

[SSuarezBrooktec]

@SSuarezBrooktec #20618 (comment) Probably the same issue ?

We are using ionChange

  <ion-segment (ionChange)="segmentChanged($event) mode="ios">
    <ion-segment-button value="friends">
      <ion-label>Friends</ion-label>
    </ion-segment-button>
    <ion-segment-button value="enemies">
      <ion-label>Enemies</ion-label>
    </ion-segment-button>
  </ion-segment>

Anyway it don't work :(

[liamdebeasi]

@SSuarezBrooktec What kind of Android device are you testing on?

[SSuarezBrooktec]

Huawei P8 Lite with Android 5.0.1 (2015)

[liamdebeasi]

Thanks for the follow up. Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/angular@5.1.0-dev.202003021824.2177461

[SSuarezBrooktec]

ok will try

[SSuarezBrooktec]

Not working :(

Repo Updated: https://github.com/SSuarezBrooktec/Ionic5_ion_segment_error

[liamdebeasi]

Thanks for the follow up. Those errors are unrelated to this issue. Can you please ensure you are deploying the app properly?

[SSuarezBrooktec]

yes, ionic cap sync android / ionic cap run android

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20673 and will be available in an upcoming release of Ionic Framework.

The errors you are running into are unrelated to this issue, so I am going to move forward with merging this fix in.

[SSuarezBrooktec]

ok, then this issue is not fixed, right? why is closed?

[liamdebeasi]

No, I fixed the issue via https://github.com/ionic-team/ionic/pull/20673 and verified it was fixed.

[SSuarezBrooktec]

How i can test it?

[liamdebeasi]

Please see my comment here with instructions on how to test the fix: https://github.com/ionic-team/ionic/issues/20648#issuecomment-593548907

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