Scroll content flickers with floating input and flexbox

Ionic Framework ionic-v3
1

I’ll go straight to the point. I have a login page and I want to centralize its content with flexbox. He my code:

login.html

<ion-content padding>
  <div class="login">
    <div class="login-image">
      <img src="../../assets/images/login.png" alt="">
    </div>
    <form action="">
      <ion-item>
        <ion-label floating>Nome de acesso</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Senha</ion-label>
        <ion-input type="password"></ion-input>
      </ion-item>

      <div padding-top>
        <button ion-button block type="submit">Entrar</button>
      </div>
    </form>
  </div>
</ion-content>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

login.scss

page-login {

  .scroll-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .login{
    max-width: 320px;
    min-width: 320px;
    .login-image {
      display: flex;
      flex-direction: row;
      justify-content: center;

      img {
        height: 100px;
      }
    }
  }
}

And here what is happening:

image

Does anybody knows why this happen and how to fix it?

2

Hey man,

You fixed this? if you did… how you did?..

1 Like