嵌套翻转卡和 Apple Safari答案

【问题标题】：Nested Flip cards & Apple Safari嵌套翻转卡和 Apple Safari
【发布时间】：2021-06-11 20:16:51
【问题描述】：

我正在尝试为登录系统制作嵌套翻转卡 - 就 Edge、Chrome、Opera 和 Firefox 而言是成功的，但 Safari...
我知道 Apple Safari 的“破解”来支持旋转卡片，所以我应用了“-webkit-backface-visibility: hidden;”所有卡片。
不幸的是，Safari 仍然会显示我卡片的旋转背面。任何人都可以帮忙吗？

这是我的代码：
CSS

/* The OUTER & INNER flip */
.flip-o-card, .flip-i-card {
  background-color: transparent;
  width: 320px;
  /*border: 1px solid #f1f1f1;*/
  perspective: 1000px;
  margin:0 auto;
}
.flip-o-card {
  height: 480px;
}
.flip-i-card {
  height: 400px;
}
.flip-o-card-inner, .flip-i-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-o-card.hover .flip-o-card-inner, .flip-i-card.hover .flip-i-card-inner  {
  transform: rotateY(180deg);
}
.login-forgot, .register, .login, .forgot {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.login-forgot, .login {
  background-color: #bbb;
  color: black;
}
.register {
  background-color: #1eff73;
  color: white;
  transform: rotateY(180deg);
}
.forgot {
  background-color: #ff1e1e;
  color: white;
  transform: rotateY(180deg);
}

/* ####################################### */

.toggle-o, .toggle-i {
    text-align: center;
}
.toggle-o {
    padding-top: 50px;
}
.toggle-i {
    padding-top: 0px;
}

jquery：

$(document).ready(function(){
    $('.toggle-o').on('click', function(){
        console.log('Flip button clicked...');
        $('.flip-o-card').toggleClass('hover');
        if( $('div.text-center.toggle-o p').html() === "Register" ){
            $('div.text-center.toggle-o p').html("Log in");
        } else {
            $('div.text-center.toggle-o p').html("Register");
        }
    });
    
    $('.toggle-i').on('click', function(){
        console.log('Switch button clicked...');
        $('.flip-i-card').toggleClass('hover');
        if( $('div.text-center.toggle-i p').html() === "Forgot password" ){
            $('div.text-center.toggle-i p').html("Back to log in");
        } else {
            $('div.text-center.toggle-i p').html("Forgot password");
        }
    });
 
});

html:

<div class="flip-o-card">
    <div class="flip-o-card-inner">
        <div class="login-forgot">
            
            <div class="flip-i-card">
                <div class="flip-i-card-inner">
                    <div class="login">
                        <p>login</p>

                    </div>
                    <div class="forgot">
                        <p>forgot</p>

                    </div>
                </div>
            </div>
            <div class="text-center toggle-i">
                <p>Forgot password</p>
            </div>
            
        </div>
        <div class="register">
            <p>register</p>
        </div>
    </div>
</div>
<div class="text-center toggle-o">
    <p>Register</p>
</div>

【问题讨论】：

Safari 是新的 IE
认为我找到了一个 jquery 的解决方案：我隐藏了翻转的卡片...看小提琴...jsfiddle.net/b06hr47x/1

标签： html css ios safari

【解决方案1】：

使用一些 jQuery 来隐藏翻转的主卡就可以了！（请参阅我在 cmets 中添加的小提琴...）但是，正如 T J 提到的，Safari 是新的 IE... Grrr

【讨论】：