在 Safari 上播放动画后损坏的 z-index

问题描述

我正在使用 css 设置一个动画以在延迟一段时间后翻转页面。 （打开书/翻页只发生一次）。

在 Google Chrome 上似乎一切正常，但在 Safari 上，动画结束后封面会被推回到其他元素的顶部。

示例：

        body {
            background-color: #4F4E68;
            height: 100%;
            width: 100%;
            margin: 0;
            overflow: hidden;
        }

        .book {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
                -ms-transform: translate(-50%,-50%);
                    transform: translate(-50%,-50%);
            width: 80%;
            height: 80%;
            -webkit-perspective: 70rem;
                    perspective: 70rem;
            
            -webkit-transform-style: preserve-3d;
                    transform-style: preserve-3d;
        }
        
        .cover {
            background-color: #36354e;
            -webkit-transform: rotateY(0deg);
                    transform: rotateY(0deg);
            width: 50%;
            height: 100%;
            position: absolute;
            left: 50%;
            z-index: -1;
            }
        
        
        .page {
            position: absolute;
            top: 1%;
            background-color: #e9e6c4;
            -webkit-transform: rotateY(0deg);
                    transform: rotateY(0deg);
            width: 49%;
            height: 98%;
            text-align: left;
            font-size: 15px;
            color: #777;
                font-family: 'Helvetica','Arial',sans-serif;
            left: 50%;
        }

        .content {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            padding: 40px; 
            -webkit-Box-sizing: border-Box; 
                    Box-sizing: border-Box;
        }

        .cover,.page {
            padding: 1rem;
            -webkit-transform-origin: 0% 0%;
                -ms-transform-origin: 0% 0%;
                    transform-origin: 0% 0%;
            border-radius: 0 5px 5px 0;
            -webkit-Box-shadow: inset 3px 0px 20px rgba(0,0.2),0px 0px 15px rgba(0,0.1);
                    Box-shadow: inset 3px 0px 20px rgba(0,0.1);
            -webkit-Box-sizing: border-Box;
                    Box-sizing: border-Box;
            overflow: hidden;


        }
        
        .cover.turn {
            -webkit-animation: bookCover 3s forwards;
                    animation: bookCover 3s forwards;
        }
        
        .page.turn {    
            animation: bookOpen 3s forwards;
            -webkit-animation: bookOpen 3s forwards;
            -moz-animation: bookOpen 3s forwards;
        }
        
        .page:nth-of-type(1) {
            animation-delay: 0.05s;
            -webkit-animation-delay: 0.05s;
            -moz-animation-delay: 0.05s;
        }
        
        .page:nth-of-type(2) {
            animation-delay: 0.33s;
            -webkit-animation-delay: 0.33s;
            -moz-animation-delay: 0.33s;
        }
        
        .page:nth-of-type(3) {
            animation-delay: 0.66s;
            -webkit-animation-delay: 0.66s;
            -moz-animation-delay: 0.66s;
        }
        
        .page:nth-of-type(4) {
            animation-delay: 0.99s;
            -webkit-animation-delay: 0.99s;
            -moz-animation-delay: 0.99s;
        }
        
        .page:nth-of-type(5) {
            -webkit-animation-delay: 1.2s;
            -moz-animation-delay: 1.2s;
            animation-delay: 1.2s;
        }
        
        .page:nth-of-type(6) {
            -webkit-animation-delay: 1.25s;
            -moz-animation-delay: 1.25s;
            animation-delay: 1.25s;
        }
        
        @keyframes bookOpen {
            30% { z-index: 999 }
            100% {  -webkit-transform: rotateY(-180deg);  transform: rotateY(-180deg);
            z-index: 999;}
        }
        @keyframes bookCover {
            30% { z-index: 999 }
            100% {  -webkit-transform: rotateY(-180deg);  transform: rotateY(-180deg);
            z-index: -1;}
        }
        
        /* Safari */
        @-webkit-keyframes bookOpen {
            30% { z-index: 999 }
            100% {  -webkit-transform: rotateY(-180deg);  transform: rotateY(-180deg);
            z-index: 999;}
        }
        
        @-webkit-keyframes bookCover {
            30% { z-index: 999 }
            100% {  
            -webkit-transform: rotateY(-180deg);  
                    transform: rotateY(-180deg);
            z-index: -1;}
        }

下面是html部分

<div class="book">
            <div class="cover turn" id="cover"></div>
            <div class="page turn">1</div>
            <div class="page turn">2</div>
            <div class="page turn">3</div>
            <div class="page turn">4</div>
            <div class="page turn" id="right-page">5</div>
            <div class="page">
                <div class="content left">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,totam rem aperiam,eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,qui dolorem ipsum quia dolor sit amet,consectetur,adipisci velit,sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,quis nostrum exercitationem ullam corporis suscipit laboriosam,nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </div>
            </div>
            <div class="cover"></div>
</div>

我已经检查了一些解决方案（大多数建议使用 transform-style: preserve-3d here），但除非我遗漏了一些东西，因为我对 css 很陌生，否则它不起作用。

有什么建议吗？

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）