задняя сторона видимости не работает в Firefox (работает в Chrome) - PullRequest
Новая
       76

задняя сторона видимости не работает в Firefox (работает в Chrome)

0 голосов
/ 14 октября 2019

backface-visibility не работает в Firefox (работает в Chrome )

Я пытаюсь сделать форму для кредитакарта, которая переворачивается, чтобы показать номер cvc.

Но в 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')
})

Решение от«дубликат» Вопрос не решает проблему

1 Ответ

0 голосов
/ 15 октября 2019

Мне нужно удалить <div id="on-card-inner"> и переделать переход цвета, который у меня есть, к передней и задней части.

Firefox, кажется, не работает, когда дочерние элементы, у которых есть дочерние элементы, для которых задняя сторона видимости установлена ​​на скрытый.

...