Firefox не скрывает заднюю сторону карты при переворачивании с использованием 3d CSS-переходов - PullRequest
Новая
       20

Firefox не скрывает заднюю сторону карты при переворачивании с использованием 3d CSS-переходов

0 голосов
/ 21 сентября 2018

Я использую CSS-переходы для размещения текста на обратной стороне карты.При наведении курсора карта переворачивается и отображает текст.

Это прекрасно работает в Chrome;однако в Firefox лицевая сторона карты остается видимой при переворачивании.

Кто-нибудь может мне помочь с CSS, который работает во всех браузерах?

https://codepen.io/anon/pen/gdqNxo

HTML: 

<div id="fws_5ba42198264cd" class="vc_row vc_row-fluid  animate_onoffset row-dynamic-el standard_section  home-grid-row discover-grid-row location-four-grid-row bring-up-five-px  " style=""><div id="home-grid-row discover-grid-row location-four-grid-row bring-up-five-px" style="position: absolute;top: 0;"></div><div class="container  dark"><div class="section_clear">
    <div class="vc_col-sm-6 make-look-pretty vc_column column_container with_padding vc_custom_1537378625076  vc_custom_1537378625076" style="padding:" data-animation="none" data-delay="">
            <div class="wpb_wrapper">

    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <h2 class="white">
        </div> 
    </div> 
            </div> 
    </div> 

    <div class="vc_col-sm-6 locations-four-grid four-grid-height vc_column column_container with_padding " style="padding:" data-animation="none" data-delay="">
            <div class="wpb_wrapper">
                <div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="students fix-padding four-grid-height wpb_column vc_column_container vc_col-sm-6 vc_col-has-fill"><div class="vc_column-inner vc_custom_1537389883311"><div class="wpb_wrapper">
    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <div class="card-wrapper">
<div class="side-a">
<h4 class="white uppercase" style="text-align: center;/*! backface-visibility: hidden; */">Card 1</h4>
</div>
<div class="side-b">
<div class="wrapper">
<h5 class="white">Filler Text</h5>
<ul class="white">
<li><a href=#>Link A</a></li>
<li><a href=#>Link B</a></li>
</ul>
</div>
</div>
</div>

        </div> 
    </div> </div></div></div><div class="campus fix-padding columbus-campus wpb_column vc_column_container vc_col-sm-6"><div class="vc_column-inner "><div class="wpb_wrapper">
    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <div class="card-wrapper">
<div class="side-a">
<h4 class="white uppercase" style="text-align: center;">Card 2</h4>
</div>
<div class="side-b">
<div class="wrapper">
<h5 class="white">Filler</h5>
<ul class="white">
<li><a href=#>LInk A</a> | <a href="#">Map</a></li>
<li><a href=#>LInk B</a></li>
</ul>
</div>
</div>
</div>

        </div> 
    </div> </div></div></div></div><div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="admissions fix-padding wpb_column vc_column_container vc_col-sm-6"><div class="vc_column-inner "><div class="wpb_wrapper">
    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <div class="card-wrapper">
<div class="side-a">
<h4 class="white uppercase" style="text-align: center;">Card 3</h4>
</div>
<div class="side-b">
<div class="wrapper">
<h5 class="white">Filler</h5>
<ul class="white">
  <li><a href=#>Filler</li>
</ul>
</div>
</div>
</div>

        </div> 
    </div> </div></div></div><div style="display:none;" class="connect fix-padding wpb_column vc_column_container vc_col-sm-6"><div class="vc_column-inner "><div class="wpb_wrapper">
    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <div class="card-wrapper">
<div class="side-a">
<h4 class="white uppercase" style="text-align: center;">Connect</h4>
</div>
<div class="side-b">
<div class="wrapper">
<h5 class="white">CONNECT</h5>
<ul class="white">
<li><a href="">Blog</a></li>
<li><a href="">Social Media</a></li>
</ul>
</div>
</div>
</div>

        </div> 
    </div> </div></div></div></div>
            </div> 
    </div> 
</div></div></div>

CSS: 

/* Setting up the flippy css */

.vc_column_container.fix-padding .vc_column-inner {
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
}

.locations-four-grid .card-wrapper {
    -webkit-box-pack:   center;
    -ms-flex-pack:      center;
    justify-content:    center;
    -webkit-box-align:  center;
    -ms-flex-align:     center;
    display:            -webkit-box;
    display:            -ms-flexbox;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    display: flex;
    height: 300px;
    padding: 0;
    z-index: 2;
}

.locations-four-grid .side-a,
.four-grid.side-a {
    display:            -webkit-box;
    display:            -ms-flexbox;
    background-repeat:  no-repeat;
    -webkit-box-pack:   center;
    -ms-flex-pack:      center;
    justify-content:    center;
    background-size:    cover;
    -webkit-box-align:  center;
    -ms-flex-align:     center;
    align-items:        center;
    display: flex;
    width: 100%;
}

.locations-four-grid .side-b,
.four-grid.side-b {
    position: absolute;
    width: 100%;
    z-index: -1;
    left: 0;
    top: 0;
}

.four-grid-height .side-a,
.four-grid-height .side-b {
    height: 300px;
}

.five-grid-height .side-a,
.five-grid-height .side-b {
    height: 200px;
}

.card-wrapper {
    -webkit-transition: all 1s cubic-bezier(.5,-0.3,.85,1.25);
    -o-transition: all 1s cubic-bezier(.5,-0.3,.85,1.25);
    transition: all 1s cubic-bezier(.5,-0.3,.85,1.25);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.locations-four-grid .wpb_content_element .wpb_wrapper:hover .card-wrapper,
.locations-five-grid .wpb_content_element .wpb_wrapper:hover .card-wrapper {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
}

.locations-four-grid .wpb_content_element .wpb_wrapper:hover h4,
.locations-five-grid .wpb_content_element .wpb_wrapper:hover h4,
 {
    display:none;
}

.side-a,
.side-b {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.side-b {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

.side-b .wrapper {
    padding: 20px;
}

.side-b ul {
    list-style-type: none;
}

.side-b h5 {
    text-align: center;
    line-height: 22px;
    font-size: 15px;
}

.side-b a:hover {
    color: #fff;
    padding: 1px 15px;
    background-color: #f9972c;
}

.location-four-grid-row .side-b {
    -webkit-box-shadow: inset 0 0 5px #fff;
            box-shadow: inset 0 0 5px #fff;
    background-color: #87cdec;
}

.locations-five-grid .side-b {
    -webkit-box-shadow: inset 0 0 5px #fff;
            box-shadow: inset 0 0 5px #fff;
    background-color: #f6943b;
}

.vc_col-sm-6 {
  width:300px;
    margin-bottom: 25px
}

.side-a {
background-color: rebeccapurple;
}

1 Ответ

0 голосов
/ 21 сентября 2018

Не берите в голову, нашел ответ здесь: Видимость с обратной стороны не работает должным образом в Firefox (работает в Safari) .

Ключом является добавление transform: rotateX(0); к передней и задней части карты.

Добавление backside-visibility: hidden; к контейнеру также работает, но делает обратную сторону карты недоступной длямыши, т.е. вы не можете нажимать на ссылки на обратной стороне.

Я понятия не имею, почему это работает, но, по-видимому, это проблема в Firefox в течение трех лет: https://bugzilla.mozilla.org/show_bug.cgi?id=1201471

...