[SalesForce] Firefox specific UI issue with lightning:input when required attribute is true

I am having this strange issue in Firefox that on load of my component, the following field is automatically bordered red without performing any action as:

The border goes away when I enter something, or hide and then show the modal. It occurs only on first load of component.

The issue is not there in any other browsers, only in Firefox.

Markup:

<lightning:layoutItem class="slds-p-around--medium" size="12" largeDeviceSize="6" mediumDeviceSize="6" smallDeviceSize="6">
      <lightning:input aura:id="fieldId"
                 required="true"
                 label="File Name"
                 name="filename"
                 value="{!v.attachmentNameValue}"/>
    </lightning:layoutItem>

Conroller for controlling required fields called only on click of a button:

areAllFieldsValid : function(component, helper){
        var isValid= true;

        var allValid = component.find('fieldId').reduce(function (validSoFar, inputCmp) {
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && !inputCmp.get('v.validity').valueMissing;
        }, true);
        if (!allValid)
            isValid = false;

        return isValid;
    },

EDITED .css:

.THIS .slds-input{ 
    box-shadow:initial;
}

New Border: