Argthtjtr

This is my form:

    <form ng-hide="mfa_required" ng-submit="signup()" action="javascript:void(0);">

            <div class="inputBlock">

                <div class="label" data-i18n="psngr.login.label-email"></div>

                <div class="input">

                    <div class="inputIcon userIcon"></div>

                    <div class="input_text">

                        <input type="email" id="email" ng-model="email.value" data-i18n="[placeholder]psngr.login.email" name="user_mail">

                    </div>

                </div>

            </div>

            <div class="inputBlock">

                <div class="label" data-i18n="psngr.login.label-password"></div>

                <div class="input" ng-class="{error: !pass.valid}">

                    <div class="inputIcon pwdIcon"></div>

                    <div class="input_text">

                        <input id="password" type="password" ng-model="pass.value" data-i18n="[placeholder]psngr.login.password" name="user_pass">

                    </div>

                </div>

            </div>



            <div id="message">

                <div ng-show="!pass.valid" class="error" data-i18n="psngr.login.errors.invalid"></div>

                <div ng-show="email.valid && email.exists" id="forgot" ng-click="forgotPass()" data-i18n="psngr.login.forgot_password"></div><!-- if email exists -->

                <div ng-show="email.valid && !email.exists" id="terms" ng-click="goToTerms($event, $root)">

                    <a>{{ $root.i18n('psngr.login.agree').replace('@@', '')}}</a>

                    <a style="text-decoration: underline;">{{ $root.i18n('psngr.billing.pay.order_info.terms_of_use')}}</a>

                </div><!-- if email does not exist -->

            </div>



            <button id="submit" type="submit" ng-disabled="!email.valid || signing || pass.value.length < 5">{{signing ? $root.i18n('psngr.login.logging_in') : (email.exists ? $root.i18n('psngr.login.signin') : $root.i18n('psngr.login.signup')) | uppercase}}</button>

            <div class="striped seperator">

                <div class="text" data-i18n="psngr.login.continue_with"></div>

            </div>

            <button id="facebook" class="external" type="button" ng-disabled="signing" ng-click="fblogin()">

                <div class="corner">

                    <div class="icon"></div>

                </div>

                Facebook

            </button><!--

         --><button id="google" class="external" type="button" ng-disabled="signing" ng-click="googleLogin()">

                <div class="corner">

                    <div class="icon"></div>

                </div>

                Google

            </button>

            <div id="googleAuth"></div>

        </form>

I have a div with the class name: striped seperator.

This is the css:

#loginFunctionality .striped {

position: relative;

text-align: center;

}



#loginFunctionality .striped .text {

display: inline-block;

background-color: #ffffff;

padding: 0 16px;

}



#loginFunctionality .striped::after {

content: "";

position: absolute;

z-index: -1;

height: 2px;

width: 100%;

background-color: #dededf;

top: calc(50% - 1.5px);

left: 0;

}

If I remove from: #loginFunctionality .striped::after the z-index -1. My stripe will be on top of the text. But when I press the button it will work and show me the next form. If I keep z-index: -1. When I press the button , it will work as expected.
This only happens on Safari iOS.
Any ideeas how I can fix this?