Why is ion-button and ion-badge misaligned vertically

Question

So this is weird. I have the following markup for an ion-button and ion-badge, with the corresponding css.

• You can see that on hdpi screen (2nd screenshot), the text labels are incorrectly vertically aligned - too high up.
• This is the same build.
• This is repeatable on any device (physical) that goes above 440dpi.

What gives?

Markup:

<div class="category-button-container">
    <ion-button class="category-button"
      mode="ios" 
      fill="outline" 
      size="small">
      Category 1
    </ion-button>
    <ion-button class="category-button"
      mode="ios" 
      fill="outline" 
      size="small">
      Category 2
    </ion-button>
</div>

<div class="ion-card-custom">
    <ion-card-header>
      <ion-badge>Something</ion-badge>
      <ion-card-title>A title</ion-card-title>
    </ion-card-header>
</div> 

SCSS:

.category-button-container {
    width: 100%;
}

.category-button {
    font-size: 13px;
    font-weight: bold;
    width: 100%;
    text-transform: capitalize;
    // ... unrelated colour styles
}

.ion-card-custom {
    display: inline-block;
    position: relative;
    background-color: var(--ion-color-placeholder);
    border-radius: 10px;
    margin: 0px;
    white-space: normal;   
    margin-right: 12px;
    width: 100%;
    height: 190px;
    text-align: left;

    ion-badge {
        text-transform: uppercase;
    }
  
    ion-card-header {
      position: absolute;
      bottom: 0px;
      left: 0px;
      padding-left: 16px;
      
      // unrelated ....
    }
}

Good:

Bad: