Z-index -1 заставляет мою форму исчезнуть на ios Safari (мобильный) - PullRequest
Новая
       16

Z-index -1 заставляет мою форму исчезнуть на ios Safari (мобильный)

0 голосов
/ 22 ноября 2018

Это моя форма: 

    <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>

У меня есть div с именем класса: полосатый разделитель.

Это 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;
}

ЕслиЯ удаляю из: #loginFunctionality .striped :: после z-index -1.Моя полоса будет поверх текста.Но когда я нажимаю кнопку, она будет работать и покажет мне следующую форму.Если я буду держать z-index: -1.Когда я нажимаю кнопку, она работает как положено.Это происходит только в Safari iOS.Любые идеи, как я могу это исправить?

...