背面可见性在Firefox中不起作用（在Chrome中有效）

Question

backface-visibility在Firefox中不起作用（在Chrome中可用）

我正在尝试制作一张可以翻转显示信用卡号的信用卡表格。

但是在Firefox中，背面完全没有显示，而正面却在两侧都显示了，但是在Chrome中它可以正常工作。

我已经尝试添加前缀，但仍然无法正常工作。

感谢您能提供的任何帮助😊

CodePen

HTML：

  <div id="on-card-content">
  <div id="on-card">
    <div id="on-card-inner">
      <div id="on-card-front">
        <div id="icon-box">
        </div>
        <div id="number-box">
          <label for="on-card-number">Card Number</label>
          <input type="text" name="on-card-number" id="on-card-number" placeholder="•••• •••• •••• ••••">
        </div>
        <div id="name-box">
          <label for="on-card-name">Cardholder Name</label>
          <input type="text" name="on-card-name" id="on-card-name" placeholder="Your Name">
        </div>
        <div id="exp-box">
          <label for="on-card-exp">Expiry Date</label>
          <input type="text" name="on-card-exp" id="on-card-exp" placeholder="MM/YY">
        </div>
      </div>
      <div id="on-card-back">
        <div id="swipe-bar"></div>
        <input type="text" name="on-card-cvc" id="on-card-cvc" placeholder="123">
        <label for="on-card-cvc">CVC</label>
        <p id="card-agree">Use of this card is subject to the credit card agreement.</p>
      </div>
    </div>
  </div>
  <button type="button" id="card-button"></button>
</div>

CSS：

        #on-card-content {
        width: fit-content;
        width: -moz-fit-content;
    }
    #on-card {
        font-family: 'Source Sans Pro', sans-serif;
        width: 320px;
        height: 190px;
        background: linear-gradient(410deg, #808080 60%, #000000 60%);
        margin: 0 auto;
        border-radius: 15px;
        color: white;
        box-shadow: 0 0 15px #0707074d;
        transition: transform 0.8s;
        transform-style: preserve-3d;
    }

    #on-card.is-active {
        transform: rotateY(-180deg);
        box-shadow: 0 0 15px #0707074d;
    }

    #card-button{
        border-radius: 15px;
        text-align: center;
        margin: 5% 40%;
        background: #1a1f71;
        color: #ffffff;
        border: none;
        padding: 10px 10px;
    }
    #card-button.is-active {
        background: #e60404;
    }

    #card-button::after {
        content: 'Next';
    }

    #card-button.is-active::after {
        content: 'Back';
    }

    #on-card-back {
        transform: rotateY(-180deg);
    }

    #swipe-bar {
        background: #000000;
        height: 20%;
        width: inherit;
        margin-top: 5%; 
    }

    #swipe-bar {
        background: #000000;
        height: 20%;
        width: inherit;
        margin-top: 5%;
    }

    #on-card-inner {
        background-color: #b3a4a4b3;
        border-radius: 15px;
        height: inherit;
        transition: all 1s ease;
    }

    #on-card-number {
        background: transparent;
        border: none;
        color: white;
    }

    #on-card-name {
        background: transparent;
        border: none;
        color: white;
    }

    #on-card-exp {
        background: transparent;
        border: none;
        color: white;
    }
    #on-card-front{
         transform:rotateY(0deg);
    }
    #on-card-front,
    #on-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
    }

    #on-card-name {
        text-transform: uppercase;
    }

    #on-card-number {
        font-size: 145%;
        width: 100%;
    }

    #icon-box {
        height: 5rem;
    }

    #number-box {
        margin-left: 5%;
        margin-bottom: 3%;
    }

    #name-box {
        width: 50%;
        float: left;
        margin-left: 5%;
    }

    #on-card-name {
        width: 100%;
    }

    #exp-box {
        width: 40%;
        float: right;
        margin-right: 3%;
    }

    #on-card-exp {
        width: 100%;
    }

    #on-card-cvc {
        text-align: right;
        margin-top: 5%;
        height: 15%;
    }

    #card-agree {
        font-size: 70%;
        margin: 5%;
    }

JS：

const cardButton = document.getElementById('card-button')
const card = document.getElementById("on-card");
cardButton.addEventListener('click', () => {
  card.classList.toggle('is-active')
  cardButton.classList.toggle('is-active')
})

“重复”问题中的解决方案无法解决问题

Answer 1

我需要移除<div id="on-card-inner">并重新进行前后的颜色过渡。

[当子元素的背面可见性设置为隐藏的子元素时，Firefox似乎不起作用。