html - CSS 翻转动画在 Safari 9.0 中不起作用

Question

好的，我得到了答案，我添加backface-visibility: hidden;到卡片的正面和背面，忘记将它添加到旋转部分，在我的情况下它是“flip-item-inner”。希望它可以帮助某人:) __

实际上翻转正在工作，动画显示，我什至可以看到卡片的背面，但是当动画结束时，不是背面，而是白色背景。尝试添加类而不是：悬停，结果是一样的，它翻转然后是白色背景而不是背面。我将 SASS 与 autoprefixer 一起使用，因此所有前缀都应该在它们的位置。它在 chrome 和 mozilla、android 设备上运行良好，但在 iOS、safari 甚至 chrome 上运行良好：在浏览器堆栈上测试：os_version=9.0 device=iPhone+6S                                                                                                                                                       

https://codepen.io/ndeviant/pen/Owjera

                                <div class="flip-item slideritems-item">
                                <div class="flip-item-inner">
                                    <div class="flip-item-front">
                                        <div class="flip-item-img-box">
                                            <img src="http://www.spinsouthwest.com/content/000/images/000249/257025_54_news_hub_209660_656x500.jpg" alt="">
                                        </div>
                                        <div class="flip-item-info">
                                            <div class="flip-item-meta">
                                                <time class="flip-item-meta-item flip-item-date" datetime="2017-10-30 14:27:18">30 октября 2017</time>
                                                <a href="" class="flip-item-meta-text flip-item-meta-item">Лайфхаки</a>
                                            </div>                                              
                                            <div class="flip-item-title">
                                                Блок при наведении 
                                                курсора на него
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flip-item-back">
                                        <div class="flip-item-info">
                                            <div class="flip-item-meta">
                                                <time class="flip-item-date flip-item-meta-item" datetime="2017-10-30 14:27:18">30 октября 2017</time>
                                                <a href="" class="flip-item-meta-text flip-item-meta-item">Лайфхаки</a>
                                            </div>
                                            <a href="" class="flip-item-title">
                                                Блок при наведении 
                                                курсора на него
                                            </a>
                                            <a href="" class="more-arrow">
                                                <span>Показать все</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

---

.flip-item
position: relative
max-width: 265px
text-align: left
perspective: 1000px
font-family: sans-serif

// Flip 
&:hover
    .flip-item-inner
        transform: rotateY(180deg)
        box-shadow: 0 0 25px 0 rgba(50, 50, 50, .2)

    .flip-item-front
        // opacity: 0

    .flip-item-back
        // opacity: 1

&-inner
    width: 100%
    height: 100%
    transform-style: preserve-3d
    background-color: #fff
    transition: all .35s ease-in-out

&-front
    min-height: 305px
    backface-visibility: hidden
    // opacity: 1
    transition: all .35s ease-in-out

&-back
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    backface-visibility: hidden
    background-color: #3E61F9
    color: #fff
    transform: rotateY(180deg)
    // opacity: 0
    transition: all .35s ease-in-out
// End flip

&-img-box
    height: 180px

    img
        object-fit: cover
        height: 100%
        width: 100%

&-info
    padding-top: 12px
    padding-bottom: 20px
    padding-left: 15px
    padding-right: 15px
    font-size: .875rem

&-meta
    width: 100%
    margin-bottom: 15px
    display: flex
    flex-wrap: wrap

    &-item
        color: #9E9E9E

    &-text
        margin-left: auto

&-title
    display: block
    text-transform: uppercase
    text-decoration: none
    font-weight: bold
    line-height: 1.4
    color: #323232

// Backface of the card
&-back
    .flip-item-info
        display: flex
        flex-direction: column
        height: 100%
        padding-bottom: 12px

    .flip-item-meta
        &-item
            color: #fff

    a
        color: #fff

    .more-arrow
        margin-top: auto

标签： htmlcsssasssafariflip