Standard navigation animation

I’m having trouble with the standard navigation slide animation. To be clear, I’m trying to style the look of a view, but have the standard slide in/out animation when a user navigates to or from a screen. I started with the tabs app template.

When I style the ion-header that slides in, I find that things like a background image (in the example below), or background colour (on other screens I’ve made), appears instantly, while other content like the title div, and content text slides in as expected.

<ion-header>
  <ion-navbar class="image-header" style="background-image: url('assets/imgs/sky-image.jpg'); background-size: 100%;">
    <div class="title">{{thing.name}}</div>
    <div class="small-date">{{displayDate(thing.published)}}</div>
    <ion-buttons end>
        <button ion-button icon-only (click)="navigateSettings()">
          <ion-icon name="options"></ion-icon>
        </button>
      </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding class="white-content">
...
</ion-content>

Can anyone point me to what I’m doing wrong in the styling to ‘break’ the animations? Any suggestions or recommended reading would be welcome. I’m not entirely clear on how/where you style from the standard implementation, and I’ve had issues testing it as it doesn’t behave consistently in the browser vs on the device, obviously getting out to the device takes longer (is their a quicker way to do that testing on device?)

I’m fairly new to ionic, so apologies if I’ve missed some etiquette or just missed the right doco. I have tried searching for help on this topic with little success as I find a lot of info on custom animations, and not a lot on why this standard animation styling is not consistent (in my case).