翻转卡 Bug Safari

Question

我使用react.js和anime.js开发了一个网站自定义卡片轮播。 我在屏幕中央的卡片上做了一个翻转动画。它在 Opera、Firefox 和 Chrome 上工作得很好，但我在 Safari 上遇到了问题。我用 safari 13.0.4 进行测试。 动画还可以，但动画结束后，文本就出现在卡片后面。第三次迭代后，它工作正常。

这是我的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() {
        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>
        )
    }

还有翻转方法：

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();
     }
});

预先感谢您的帮助。

Answer 1

由于 Safari 无法正确管理

transform-style

和

preserve-3d

，您应该将 1px 到

translateZ()

放入

.back

类以避免出现该故障。

Answer 2

成功了，谢谢！我花了几个小时寻找这个错误的解决方案。