Setting color on ion-button makes it disappear

Ionic Framework
1

When testing my application on the xcode ios simulator for the iPhone SE 3rd gen, all my <ion-button color=“” elements are invisible. If it is just an with the default color where color=secondary (or color=danger, or whatever) is not specified, that button still is visible. The buttons are still clickable. (I was trying to get the buttons console.log their css onClick to figure out what was happening but no dice.) The buttons stay visible if I set other ion-button attributes like size=“large” or shape=“round”. The only issue seems to be color

This was found on an iphone 11 with 16.3 ios on it. Would appreciate any help

2

You need to show your code.

3

Should I just copy/pasta my whole app here? I’m not sure what’s most helpful for people to see

Example of what’s broken:

    <ion-button color="primary">Primary</ion-button>
    <ion-button class="testprimary" color="primary" (click)="testA($event)">Test primarey</ion-button>
    <button ion-button (click)="test($event)" color="secondary">Save secondary button</button>
    <ion-button class="testdanger" color="danger">Test danger</ion-button>
    <button ion-button color="danger">Save danger button</button>
    <ion-button size="large">Test laergwe</ion-button>
    <ion-button fill="outline">Tes outline</ion-button>
    <ion-button shape="round">Test rd</ion-button>```

This is what I see when I do an `npm run` and run it as a web app locally: 
![Screenshot 2023-01-27 at 4.41.06 PM|426x500](upload://acoCanpnGZqJCb7zL22leRTDhhv.png)


This is what I see on the emulator:
![Screenshot 2023-01-27 at 4.39.15 PM|470x500](upload://hiAYis6AUEgahxCTzxBnnTDq6Y1.png)
4

Sorry, those screenshots didn’t work right:
This is the webapp

Screenshot 2023-01-27 at 4.43.31 PM
Screenshot 2023-01-27 at 4.43.31 PM958×1142 51.8 KB

This is the iphone app

Screenshot 2023-01-27 at 4.43.40 PM
Screenshot 2023-01-27 at 4.43.40 PM916×1422 134 KB

You can see how the danger button doesn’t appear in the iphone app.

this is how I build the app to test locally: ENV=prod ionic cordova prepare ios && ENV=prod ionic cordova run ios

This is the output from ionic info:


   Ionic CLI                     : 6.20.4 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.5.1
   @angular-devkit/build-angular : 15.1.3
   @angular-devkit/schematics    : 15.1.3
   @angular/cli                  : 15.1.3
   @ionic/angular-toolkit        : 7.0.0

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : android 11.0.0, ios 6.2.0
   Cordova Plugins   : cordova-plugin-ionic-webview 5.0.0, (and 13 other plugins)

Utility:

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

System:

   ios-sim : 8.0.2
   NodeJS  : v18.10.0 (/Users/tamarabartlett/.nvm/versions/node/v18.10.0/bin/node)
   npm     : 8.19.2
   OS      : macOS
   Xcode   : Xcode 14.1 Build version 14B47b
5

Seems you have changed your global styles, check your variables.scss, you problem lies there.

6

Alas! I wish it were that. The buttons were working great on the ios I had before. I was testing, noticed that ios 16.3 was out, downloaded that and started testing again (still using the same version from TestFlight, no code changes). I’m wondering if it’s an angular/ios thing now? I’m probably going to look at an ios forum next

7

What is in the ‘testdanger’ class?