задняя сторона флип-карты всегда белая в Mac OS и отлично работает на Windows и Ubuntu - PullRequest
Новая
       52

задняя сторона флип-карты всегда белая в Mac OS и отлично работает на Windows и Ubuntu

0 голосов
/ 26 октября 2018

эта флипкарта отлично работает на Windows Chrome, Mozilla Ubuntu Chrome, Mozilla и на всех мобильных устройствах, включая Apple, ** но она не работает нормально в Mac Chrome и Mac Safari ..... проблема переворачивание перехода работает нормально, но задняя сторона карты не отображается, она мигает, а затем исчезает, задняя сторона будет белым на фоне Mac OS. **

    .card-container {
        cursor: pointer;
        height: 460px;
        -webkit-perspective: 600;
        -moz-perspective: 600;
        -o-perspective:600; 
        perspective: 600;
        position: relative;
        margin: 15px auto;
      }
img{
width:300px;
height:300px;
}
      .card {
        height: 100%;
        position: absolute;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        width: 100%;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
      }
      .card:hover {
        transform: rotateY(180deg);
       -webkit-transform:rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
      }
      .card .side {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        border-radius: 6px;
        height: 100%;
        position: absolute;
        overflow: hidden;
        width: 100%;
        padding: 25% 0%;
      }
      .card .back {
        background: #8982f6;
        color: #FFFFFF;
        line-height: 26px;
        font-size: 16px;
        padding: 8%;
        text-align: center;
        transform: rotateY(180deg);
       -webkit-transform:rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        background-repeat: round;
        background-image: url("/about-1.png");
        z-index: 9999999;
      }
      
      .aboutus .founder {
        /* padding: 57px 0px; */
        background: #FFEBCD;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .card-text{
        z-index: 1;
        position: absolute;
        border: solid 1px #8982f6;
        display: block;
        text-align: center;
        background-color: #8982f6;
        color: white;
        padding: 10px 0px 0px 0px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;  
    }
 <section class="founder col-lg-12 col-md-12 col-12">
                <div class="row founder-fix-row">
                    <div class="col-lg-12 col-md-12 col-12">
                        <div class="title-container">
                            <h2>xxxxxxxxxx</h2>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                        <div class="card-container" [ngClass]="{'card1back' : toggleceo }">
                            <div class="card">
                                <div class="card-text col-md-12">
                                    <h3>xxxxxxx</h3>
                                    <p class="medium">CEO - FOUNDER</p>
                                </div>
                                <div class="side"> <img class="img-fluid" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=40085e3ea5d8524b7518df890e4aa72d&w=1000&q=80"
                                        alt="">
                                </div>
                                <div class="side back">
                               jshs shhhs shshhs shhhs shshsh shshhs shshhs shhsh shhs hs sh shhshjsv shjksjhs hskjsj nd Convergys.

                                </div>
                            </div>
                        </div>
                        <div class="card-showbutton">
                            <a (click)="toggleceo = !toggleceo">show bio &nbsp;&nbsp;<i class="fas fa-arrow-right"></i> </a>
                        </div>
                    </div>
                    <div class="col-lg-4  col-md-4 col-sm-12 col-12">
                        <div class="card-container" [ngClass]="{'card2back' : toggleco }">
                            <div class="card">
                                <div class="card-text col-md-12">
                                    <h3>sdsd sdsdse</h3>
                                    <p class="medium">CO - FOUNDER</p>
                                </div>
                                <div class="side"> <img class="img-fluid" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=40085e3ea5d8524b7518df890e4aa72d&w=1000&q=80"
                                        alt=""></div>
                                <div class="side back">Sxkjskjks shjskjs skjskjkjs skjskjkjs                             tenure in Accenture and Dell. </div>
                            </div>

                        </div>
                        <div class="card-showbutton">
                            <a (click)="toggleco = !toggleco">show bio &nbsp;&nbsp;<i class="fas fa-arrow-right"></i> </a>
                        </div>

                    </div>
                    <div class="col-lg-4  col-md-4 col-sm-12 col-12">
                        <div class="card-container" [ngClass]="{'card3back' : togglecto }">
                            <div class="card">
                                <div class="card-text col-md-12">
                                    <h3>skskskks V</h3>
                                    <p class="medium">s, CO - founder</p>
                                </div>
                                <div class="side"> <img class="img-fluid" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=40085e3ea5d8524b7518df890e4aa72d&w=1000&q=80"
                                        alt=""></div>
                                <div class="side back">smskks skjskjkjs skjslk dshksadasd sajkjasdj dasdhjksad sadkjhsajdas ashdjhasdlsadrflow :D). He swears by
                                    sadsadassadkaasdjsadsad asdsad </div>
                            </div>
                        </div>
                        <div class="card-showbutton">
                            <a (click)="togglecto = !togglecto">show bio &nbsp;&nbsp;<i class="fas fa-arrow-right"></i> </a>
                            <!-- <button (click)="togglecto = !togglecto"  class="btn btn-md btn-navy maright-23">show bio</button> -->
                        </div>
                    </div>
                </div>
            </section>
...