bug: Button color transitions are inconsistent

[moose4lord]

Bug Report

Ionic version: [x] 4.11.2

Current behavior: When hovering/clicking a component, different color transitions occur depending on platform.

Expected behavior: Would expect the color transitions to be the same.

Steps to reproduce: (See code snippets below) All of this testing was done with Chrome v78 installed.

On the web platform a button makes the following transitions: button normal: yellow button mouse_over: green button mouse_down: light green button mouse_up: green button mouse_out: yellow

On the Android platform (using the Android 9 (Pie) emulator): button normal: yellow button mouse_down: light yellow button mouse_up: yellow (note there's no green at all when using the emulator)

On the Android platform (using Android 9 (Pie) on a real device (Moto G6)) button normal: yellow button mouse_down: green then light green button mouse_up: green When the button looses focus it returns to yellow.

I can understand why you might want a button to stay highlighted after it has been activated. @brandyscarney mentions that this behavior was changed to comply with the MD spec ( #18534). That's a design decision I can live with. But why would the colors behave differently depending on if you're using the emulator or a real device?

Related code: In variables.scss, modify the tertiary colors (this isn't really needed, but it's helpful to see the color differences for debugging):

/** tertiary **/
  --ion-color-tertiary: #979514; /* yellow */
  --ion-color-tertiary-rgb: 151, 149, 20;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #a50e09; /* red */
  --ion-color-tertiary-tint: #096616; /* green */

Note the main color is yellow and the tint color is green.

Two buttons created in an HTML file:

<ion-grid class="ion-no-padding">
    <ion-row>
      <ion-col><ion-button expand="block" color="tertiary" (click)="onAuxButton(0)">Auxiliary 1</ion-button></ion-col>
      <ion-col><ion-button expand="block" color="tertiary" (click)="onAuxButton(1)">Auxiliary 2</ion-button></ion-col>
    </ion-row>
  </ion-grid>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.4 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.2
   @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 : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 6 other plugins)

Utility:

   cordova-res : 0.8.1 
   native-run  : 0.2.9 

System:

   Android SDK Tools : 26.1.1 (/Users/klord/Library/Android/sdk)
   NodeJS            : v10.16.3 (/usr/local/bin/node)
   npm               : 6.12.0
   OS                : macOS Catalina
   Xcode             : Xcode 11.1 Build version 11A1027

[moose4lord]

Just for another data point, I ran my test on another real device running Android 5.1 (Lollipop) (a Moto G1) and got this: button normal: yellow button mouse_down: light yellow button mouse_up: yellow

Pretty much the same as the emulator. My Android 9 device (Moto G6) seems to be behaving as intended (the button remains highlighted after being touched), but the Android emulator and my old Android 5.1 device (Moto G1) do not. Weird.

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

[moose4lord]

This bug appears to be fixed in the latest Ionic framework. I don't see the odd color transitions anymore.

Thanks

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