Outside ion-content does not show on iOS but works on Android

Ionic Framework ionic-v3
1

I have some code for a button that sticks to the bottom of the screen as I would like it to stay on top of the content if it is scrollable as it cannot fit on the screen.

On a solution I found for ionic 1, a user suggested to have the button outside of ion-content which a lot of users said worked for them.

I’ve tried this for ionic 2 and it works perfectly for Android and on ionic serve but in the iOS emulator in xcode (after ionic build ios --release), the button is not visible.

Here is the HTML:

<ion-content>
      .....
<ion-content>

<div class="fixed-outside">

      <button (click)=goToDetails2(); bath>Continue</button>

</div>

and the CSS:

.fixed-outside {

    button {
       font-size: 23px;
       display: block; 
       margin-top: 15px;
       margin-bottom: 20px;
       margin-left: auto;
       margin-right: auto;
       width: 190px;
       text-align: center;
    }
}

Would anyone be able to provide me a fix or an alternate method for a button fixed to the bottom of the screen that doesn’t scroll with the content?

2

Also, I know there is ion-footer and have tried this too but got the same results