Ionic App view content move upside when keyboard comes up for typing inside text field

I am using Ionic 2 for building an app, I have created a login page which looks like this

Now When I try to type something in username fieild the keyboard pops out and the whole page scrolls upside like this

Now I am not able to see the text fields.

I have seen some solutions on google to stop scroll when keyboard come out.Even I have tried the same but then it behaves weird in landscape mode.

my login page code is.

<ion-content class="background">
    <ion-card>
        <ion-card-header>
            <ion-icon name="ios-log-in"></ion-icon>
            Login
        </ion-card-header>
        <ion-card-content>
            <ion-list noline >
                <ion-item>
                    <ion-label floating>Username</ion-label>
                    <ion-input class="inpt" type="text"></ion-input>
                </ion-item>
                <ion-item >
                    <ion-label floating>Password</ion-label>
                    <ion-input type="password"></ion-input>
                </ion-item>
            </ion-list>
            <div padding>
                <button ion-button block outline color="light">
                    <ion-icon name="ios-log-in"></ion-icon>
                    &nbsp; Sign In
                </button><br />
                <!--    <button ion-button block color="fb">
                            <ion-icon name="logo-facebook"></ion-icon>
                            &nbsp; Login with Facebook
                        </button> -->
            </div>
            <a href="">
                Forgot Login Details?
                <b>Get Help Signing IN</b>
            </a>
        </ion-card-content>

    </ion-card>
    <button ion-button block color="primary">Don't have an Account? Sign Up</button>

</ion-content>

This is my sass code:

page-login {

    .background{
        background-image:url('../assets/bg.jpg');
        background-repeat: none;
    }

    .scroll-content{
        align-content:center;
        display:flex;
        flex-direction:column;    
     }

     ion-card.card{
         box-shadow:none;
         background:rgba(0,0,0,0.6);
         border-radius:8px;
     }

     a, p, ion-card-header.card-header {
         color:#fff;
     }

     .list > item-block:first-child{
         border:medium none
     }

     .item{
         margin-bottom:10px;
         background:rgba(255,255,255,0.7);
         border:medium none;

         .text-input,{
             color:green;
         }

         *:-moz-placeholder{
             color:black !important;
         }

         *:-moz-input-placeholder{
             color:black !important;
         }
     }
 }

I have gone through some links which says that this is a bug in ionic beta version. this link

Is there any standard solution on this issue ? because this functionality is common thing in all apps . Bit confused to take a call to go with ionic or not .