Flip Card Bug Safari - PullRequest
Новая
       4

Flip Card Bug Safari

0 голосов
/ 13 января 2020

Я разрабатываю на сайте карточную карусель с реакцией. js и аниме. js. Я делаю флип анимацию на карточке в центре экрана. Он прекрасно работает с оперой, firefox и chrome, но у меня проблема с сафари. Я проверяю это с Safari 13.0.4. И анимация в порядке, но сразу после анимации текст go позади карты. И после 3-й итерации все работает нормально.

передняя карта

задняя карта Opera, Chrome, Firefox и в Safari (после 3-й флип для Safari)

задняя карта Safari

задняя карта Safari без цвета и с черным текстом

Здесь my css: 

.partner-card-focused--background__extern {
    transition: background-color 0.35s ease-in-out;
    border-bottom-right-radius: 5.5vh;
    height: 50vh;
    width: 35vh;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 3.8vh;
    padding: 1vh;
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.50);
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
}

.front,
.back
{
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.front {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
}

.back-hidden {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.back {
    top: 0;
    left: 0;
    transform: rotateY(180deg) translateZ(0);
    -webkit-transform: rotateY(180deg) translateZ(0);
    -moz-transform: rotateY(180deg) translateZ(0);
    -ms-transform: rotateY(180deg) translateZ(0);
}

.partner-card-focused--background__intern {
    border-bottom-right-radius: 4.5vh;
    height: 50vh;
    width: 35vh;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.partner-card-focused--image {
    position: relative;
    z-index: 1;
    width: 100%;
}

.partner-card-focused--description {
    position: fixed;
    margin: 1vh;
    font-size: 2vh;
    display: block;
}

Здесь мой метод render render: 

render() {
        let overClass = "";
        if (this.state.hover)
            overClass += " blue-color--back"
        else
            overClass += " black-color--back"
        return (
            <div>
                <div className="partner-card-focused--text--container">
                    <div className="partner-card-focused--square blue-color--back"/>
                    <Typing text={this.state.partner.name} startTime={450} spacetime={80} class="partner-card-focused--text black-color font-first" />
                </div>
                <div ref={this.targetContainer}>
                <div className={"partner-card-focused--background__extern button" + overClass} onClick={this.click} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} ref={this.targetCard}>
                    <div className="front">
                        <h1 className="partner-card--text white-color font-first select-none back-hidden">{this.state.partner.name}</h1>
                        <div ref={this.targetBackgroundIntern} className="partner-card-focused--background__intern white-color--back back-hidden">
                            <img ref={this.targetImage} src={this.state.partner.image} className="partner-card-focused--image select-none back-hidden" alt="Focused partenaire poster"/>
                        </div>
                    </div>
                    <div className="back">
                        <p className="partner-card-focused--description white-color font-first back-hidden">{this.state.partner.description}</p>
                    </div>
                </div>
                </div>
            </div>
        )
    }

И метод flip: 

this.flipped = !this.flipped;
let callback = () => {this.playing = false;}
anime({
     targets: this.targetCard.current,
     scale: [{value: 0.90}, {value: 1.25}, {value: 1, delay: 250}],
     rotateY: {value: '+=180', delay: 200},
     easing: 'easeInOutSine',
     duration: 400,
     complete: function(){
          callback();
     }
});

Заранее благодарен за любую помощь.

1 Ответ

0 голосов
/ 22 января 2020

Поскольку Safari не справляется правильно transform-style с preserve-3d, вы должны поместить 1px в translateZ() в .back класс, чтобы избежать этого сбоя.

...