Layering Issue when using Fixed elements and switching views from the side menu

Hey

I have come across a layering issue when using fixed-position elements and switching views from the side menu.

1. I start by showing a fixed-positioned div (with a background image) when
   menu items are selected, using Angular's ng-show. This works fine.
2. I then open the side menu and switch to another view. This is done using an href tag on the menu element. The page switches.
3. I then open the side menu again and switch back to the first view, and the div appears behind the other text on the page. Screenshots attached below.

iOS 9.0 Emulator
Ionic 1.6.4

<ion-view view-title="Browse The Menu" hide-back-button="true">
<ion-nav-buttons side="right">
    <button class="button button-icon ion-chatbox-working ng-hide" data-ng-click="onNotificationIconClicked()" data-ng-show="rootContext.showNotificationsIcon && !rootContext.notificationsRead"></button>
    <button class="button button-icon ion-navicon" data-menu-toggle="right"></button>
</ion-nav-buttons>
<ion-content>
    <div class="padding">
        <div class="menuItems">
            <div class="menu-item" data-ng-repeat="menuItem in context.menuItems" data-ng-show="menuItem.getCategoryId() == context.selectedCategoryId">
                <div class="menu-item-img" data-ng-class="{menuItemSelected: menuItem.isSelected()}"><img data-ng-src="{{ menuItem.getImageUrl() }}" data-ng-click="onMenuItemSelected(menuItem)"/></div>
                <div class="menu-item-content">
                    <div class="menu-item-header">{{ menuItem.getName() }}</div>
                    <div class="menu-item-price">R {{ menuItem.getPrice() }}</div>
                    <div class="menu-item-description">{{ menuItem.getDescription() }}</div>
                </div>
            </div>
        </div>
    </div>
</ion-content>
<ion-footer-bar>
    <ion-scroll zooming="false" direction="x" class="categories">
        <div class="category-item-container" data-ng-repeat="category in context.categories track by $index">
            <div class="category-item" data-ng-class="{categoryContainerFirst: $first, categoryContainerLast: $last}">
                <div class="category-text" data-ng-class="{categorySelected: category.getId() === context.selectedCategoryId}" data-ng-click="onCategorySelect(category)">{{ category.getName() }}</div>
            </div>
        </div>
    </ion-scroll>
</ion-footer-bar>
<div class="add-to-cart-button ng-hide" data-ng-show="context.selectedItemCount > 0" data-ng-click="onAddSelectedItemsToOrder()"></div>

.add-to-cart-button {
    position: fixed;
    width: 64px;
    height: 64px;
    background: url("../img/menu/add-to-cart-button.png") no-repeat left;
    background-size: 64px 64px;
    bottom: 0;
    left: calc(100% - 85px);
    top: calc(100% - 120px);
    z-index: 100;
}

I have tried multiple combinations of where I specify the z-index attribute, but it doesn't make a difference.

This only happens when using the side menu. If I navigate to another view from within the same page, it's fine. And when this occurs I can still click the element, so it seems to be purely a rendering issue.

This occurs when using both a background image on the div and using an image tag within the div.

Regards
Garth Wood