Button disappears when pressed

I have a button in a component that disappears when it is pressed. The events that are bound to it still fire when it is pressed but not visible. Typically the components that this button is located in is part of a list of those components. The first button that is pressed in that list of components always disappears. When the other buttons are pressed in the other components they don’t seem to disappear. I haven’t had any luck recreating the bug when I run the code in a local browser on my machine.

<ion-item class="collection-item" *ngIf="collectionData">
  <ion-card class="collection-card">
    <ion-card-header class="collection-card-header">
      <button ion-button color="primary" (click)="presentPopover($event)"> <!-- This button -->
      <span class="collection-identifier">{{collectionData.identifier}}</span>
      <span class="collection-name">&nbsp; &nbsp;{{collectionData.name}}</span>
      </button>
    </ion-card-header>
....
</ion-item>

The definition of “primary” in the scss file is primary: #387ef5 I’m thinking that the button and text are somehow assuming the same color as the parent container but I can’t figure out how that is happening. The presentPopover() function pops up a PopoverController menu.

My packages.json file is using either the latest or fairly recent releases of Angular and Ionic.

    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "ionic-angular": "^3.9.2",
    ...

I’m currently unable to debug on my phone but trying to work through that issue. I think there is a firewall rule blocking my access.

Edit 4 March
I was able to get debugging on the phone to work and found that the following button-effect was causing the problem. It is appended to the end of the button element after the button is clicked and isn’t removed. If I manually delete it through the debugger the button re-appears on the device. I’ve seen the problem on Android 4.4, 6, and 7.

<div class="button-effect" style="transform: translate3d(-71px, -106px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 371ms, opacity 259ms 112ms;"></div>

Here is the original DOM before pressing

<button color="primary" ion-button="" class="disable-hover button button-md button-default button-default-md button-md-primary" ng-reflect-color="primary"><span class="button-inner">
      <span class="collection-identifier">XXXX</span>
      <span class="collection-name">&nbsp; &nbsp;NAME OF XXXX</span>
      </span><div class="button-effect"></div></button>

And here is after pressing when the button disappears

<button color="primary" ion-button="" class="disable-hover button button-md button-default button-default-md button-md-primary" ng-reflect-color="primary"><span class="button-inner">
      <span class="collection-identifier">XXXX</span>
      <span class="collection-name">&nbsp; &nbsp;NAME OF XXXX</span>
      </span><div class="button-effect" style="transform: translate3d(-71px, -106px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 371ms, opacity 259ms 112ms;"></div></button>

Edit two for 4 March
Also, I replaced the parent container, ion-card-header, with a div and the problem disappeared. Not sure I like this fix yet as I don’t understand why the ion-card-header would cause this odd behavior. May investigate more, or may go to sleep.