Actionbar Action Items do not show ios.position of font-icons correctly

[tskweres]

I have two views, and I use the slideLeft and slideRight transition to navigate back and forth between them.

In the actionbar, I have font-icons as buttons with ios.position left and ios.position right. When the route changes happens, the buttons 'snap' into place after the page loads as opposed to being in the correct spot to begin with .

My Code =======

// main page
<GridLayout class="Page">

  <ActionBar  #title="">

    <ActionItem ios.position="left" (tap)="goSettings()">
      <Button text="&#xE8B8;" class="material-icons"
        style="font-size: 28; color: rgba(0,0,0,.2);
        background-color: transparent;
        width: 50px;
        text-align: left;">
      </Button>
    </ActionItem>

    <NavigationButton visibility="false;"></NavigationButton>

  </ActionBar>

</GridLayout>

// settings page

<GridLayout class="Page">

  <ActionBar title="Settings">

    <ActionItem ios.position="right" (tap)="goBack()">
      <Button #swipeicon text="&#xE87D;" class="material-icons"
        style="font-size: 28; color: rgba(0,0,0,.2);
        background-color: transparent;
        width: 50px;
        text-align: right;">
      </Button>
    </ActionItem>

    <NavigationButton visibility="false;"></NavigationButton>

  </ActionBar>

  <Label text="Settings Page"></Label>

</GridLayout>

// function to change views

public goSettings() {

    this.routerExtensions.navigate(["/settings"], {
        transition: {
            name: "slideRight",
            duration: 300,
            curve: "easeInOut"
        }
    });

  }

When navigating from the main page to the settings page, the settings font-icon inside the actionbar snaps into place from left to right.

[tskweres]

I am using:

"nativescript": {
    "id": "org.nativescript.catch",
    "tns-ios": {
      "version": "2.4.0-2016-9-28-1"
    }
  },
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@angular/router": "3.0.0",
    "nativescript-angular": "1.0.0",
    "reflect-metadata": "^0.1.8",
    "tns-core-modules": "2.3.0"
  },
  "devDependencies": {
    "nativescript-dev-sass": "^0.3.0",
    "nativescript-dev-typescript": "^0.3.2",
    "typescript": "^2.0.3",
    "zone.js": "^0.6.21"
  }