[v4.0.0-beta.15] Firefox Showing ion-input Elements with red border

[almothafar]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (C:\Users\almothafar\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.15
   @angular-devkit/build-angular : 0.10.5
   @angular-devkit/schematics    : 7.0.5
   @angular/cli                  : 7.0.5
   @ionic/angular-toolkit        : 1.1.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   Android SDK Tools : 26.1.1 (D:\Android\sdk)
   NodeJS            : v11.1.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

Describe the Bug
The code in "Related Code" section producing input component with red borders in Firefox 63.0.1 (64-bit)

Steps to Reproduce
Steps to reproduce the behavior:

1. Get an ionic starter.
2. Place the code above in any screen you like.
3. Start ionic serve and open URL in Firefox.

Related Code

<form #loginForm="ngForm" novalidate (ngSubmit)="onLogin(loginForm)">
    <ion-list>
      <ion-item>
        <ion-label position="stacked" color="primary">Username</ion-label>
        <ion-input [(ngModel)]="login.username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off" required></ion-input>
      </ion-item>

      <ion-text color="danger">
        <p [hidden]="username.valid || submitted == false" padding-left>Username is required</p>
      </ion-text>

      <ion-item>
        <ion-label position="stacked" color="primary">Password</ion-label>
        <ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" required></ion-input>
      </ion-item>

      <ion-text color="danger">
        <p [hidden]="password.valid || submitted == false" padding-left>Password is required</p>
      </ion-text>
    </ion-list>

    <ion-row responsive-sm>
      <ion-col>
        <ion-button type="submit" expand="block">Login</ion-button>
      </ion-col>
      <ion-col>
        <ion-button (click)="onSignup()" color="light" expand="block">Signup</ion-button>
      </ion-col>
    </ion-row>
  </form>

Expected Behavior
Inputs should be shown without any of these kinds of issues.

In Chrome (beta 13):

In Chrome (beta 15):

In Edge:

In Tor (based on firefox) (beta.13):

Additional Context
In Beta 13 it was just 1 border, you said it is fixed in "latest" beta here #16054, the latest beta now is 15, and it becomes worst and showing 2 lines, please don't close ticket until you get confirmation from ticket owner, not your guesses!!!!.

In Firefox Beta 13:

Note: the background changed because of breaking changes, so I need to apply them, I'm not reporting this as it i snot an issue, I'm just reporting the red lines.

[almothafar]

As a follow-up, I tried to set the border with 0 was not helpful, also when I reduced the width to 90% it seems it is fully bordered input from all sided:

Inspecting the input inside the component, it got box-shadow of .un-invalid from forms.css of Mozilla

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.