Ion-Button's not showing up in iOS on a physical device, but are clickable. The buttons show up fine in the browser and the simulator

Ionic Framework ionic-v3
1

Hey everyone, I am reaching out here as a last ditch effort. I got thrown into fixing a client’s app which is using ionic v3 and angular v4. I have been working on updates for a couple of months now and in this most recent build some of the buttons and form fields are not showing up. I reverted any scss changes I had made since the last build, and still nothing. The buttons and fields show up fine in the browser and simulator, it is just the physical device. Has anyone experienced anything like this. Testing on iOS 16.2. I am not getting any errors in the console. Here is an example, this is on basically what would be the home page of the app, the blue button shows up fine but the green one does not.

<ion-row class="large-button-row" align-items-center>
      <ion-col col-6>
        <button ion-button full color="dark-blue" (click)="searchTrackSystem()" large>
          <ion-icon name="search"></ion-icon>
          Search Track System
        </button>
      </ion-col>
      <ion-col col-6>
        <button ion-button full color="dark-green" (click)="createTrackSystem()" large>
          <ion-icon name="add"></ion-icon>
          Create Track System
        </button>
      </ion-col>
    </ion-row>
2

why don’t you use ion-button?

3

Not sure, that’s how the code was when I got it. I will try this and see if that fixes my issue. Does <button ion-button> not do the same thing? It looks like this dev was doing it both ways throughout the app.

4

Use and see if somethislng changes

5

Hey,
I am reaching the same problem after updating to iOS 16.2.
Did you solve the problem?
Thanks.

7

Hey did you ever solve this issue? I did not, and am still trying to figure it out.

8

I am the OP, just under a different account

9

Sorry to hear that this is still and issue for you. Clearly, you have already done some troubleshooting, so sorry if I suggest something you have already tried, but it’s hard to know exactly what’s going on without more information or seeing the codebase. However, here are some thoughts:

Check the CSS for the green button

Since the blue button is showing up, it’s possible that there is some custom CSS or styling that’s causing the green button to disappear. Check the CSS file(s) and see if there’s anything that could be affecting the green button’s visibility. Also, check if there are any conflicting styles or styles that are being overridden.

Check the ion-button component

It’s possible that there is something wrong with the ion-button component that’s causing the green button to not show up on the physical device. Check the documentation for the ion-button component and see if there are any known issues or if there’s anything that you need to be aware of when using it.

Test on different physical devices

Since the issue is only happening on the physical device, it’s possible that it’s a device-specific issue. Try testing the app on different physical devices to see if the issue persists. If it only happens on one device, then it’s likely a device-specific issue.

Check the console logs on the physical device

Even though you’re not getting any errors in the console, it’s still a good idea to check the console logs on the physical device. There could be something there that’s causing the issue that’s not showing up in the browser or simulator. Try using the Safari developer tools or Xcode to access the console logs on the physical device.

Update to the latest version of Ionic and Angular

Ionic v3 and Angular v4 are both quite old and there could be compatibility issues with the latest version of iOS. Consider updating to the latest version of Ionic and Angular, which are currently Ionic v5 and Angular v13. This will ensure that your app is up-to-date and has the latest fixes and improvements.

10

hey I appreciate the reply, I have played around with the css a lot. I have not checked for errors on the physical device though, thats a good idea. I just assumed since there is none in the simulator there would be none on the physical device. Trust me, if I could I would upgrade in a heart beat but unfortunately I think it will break the entire app. They are using the app currently in “production”, its an enterprise app, the employees use it and they want to get it working good enough, so that we can eventually re-write it. I guess the buttons show up fine on the older IOS versions, it just seems like when 16.2 came out was when this happened. I almost positive it’s a compatibility issue but upgrading is not really in the cards right now.

11

Lol. “Just stop the boat from leaking”. (been there before)

13

lol it’s the worst. Hopefully I can figure this out somehow.

14

Hi, Has anyone figured out the cause of this?

Experiencing a similar issue where trying to publish a minor copy change to ionic3 app has caused certain buttons not to display on physical devices, as well as some other colour related css not being applied.
None of the new copy changes have been in any way related to the issues with existing buttons.

These buttons can still be pressed, just they don’t appear to be present as they have all white backgrounds. The display issues differ among iphones, for example one not appearing for me, with three missing for another team member on the same screen. All simulators work okay as does android etc.

Specifically all the changes seem to be related to the background-colour being set as white but at random among elements with the exact same css.