给定的 CSS 代码中有什么问题？它不适用于 iPhone

Question

此加载程序可在笔记本电脑和 android 上运行，但无法在 iPhone（Safari 和 Chrome）和 Mac（Safari）上运行。使用 browserstack 测试在 safari 上使用开发工具检查所有属性。无法使用以前的答案解决问题。我认为这是一个 z 索引错误，但也没有发现任何与此相关的问题。

正确 - On Windows and Android

不正确 - On iPhone and Mac

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="loader">
            <div class="content">
                <div class="planet">
                    <div class="ring"></div>
                    <div class="cover-ring"></div>
                    <div class="spots">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <p>loading</p>
            </div>
        </div>
    </body>
    <style>
        .loader {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            width: 100%;
            background-color: #001534 !important;
        }

        .loader > .content {
            width: 300px;
            height: 300px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loader > .content .planet {
            width: 65%;
            height: 65%;
            background-color: #c05227;
            border-radius: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            transform-origin: center center;
            box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);
            animation: planet 5s ease infinite alternate;
            /* planet ring */
            /* to cover the back of the ring */
            /* planet spots */
        }

        @keyframes planet {
            0% {
                transform: rotate(10deg);
            }

            100% {
                transform: rotate(-10deg);
            }
        }

        .loader > .content .planet .ring {
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 100%;
            background-color: #bacbd9;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-origin: 33% center;
            box-shadow: 2px -10px 0px rgba(0, 0, 0, 0.1), inset -5px -10px 0px rgba(0, 0, 0, 0.1);
            animation: ring 3s ease infinite;
            /* small ball */
            /* inner ring */
        }

        @keyframes ring {
            0% {
                transform: rotateX(110deg) rotateZ(0deg) translate(-50px, 5px);
            }

            100% {
                transform: rotateX(110deg) rotateZ(360deg) translate(-50px, 5px);
            }
        }

        .loader > .content .planet .ring:before {
            content: "";
            position: absolute;
            width: 10px;
            height: 30px;
            border-radius: 100%;
            background-color: #7ea1bf;
            z-index: 2;
            left: calc(0px - 5px);
            box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.2);
        }

        .loader > .content .planet .ring:after {
            content: "";
            position: absolute;
            width: 240px;
            height: 240px;
            border-radius: 100%;
            background-color: #7ea1bf;
            box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);
        }

        .loader > .content .planet .cover-ring {
            position: absolute;
            width: 100%;
            height: 50%;
            border-bottom-left-radius: 80%;
            border-bottom-right-radius: 80%;
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
            transform: translate(0px, -17px);
            background-color: #c05227;
            z-index: 2;
            box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.1);
        }

        .loader > .content .planet .spots {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            z-index: 2;
        }

        .loader > .content .planet .spots span {
            width: 30px;
            height: 30px;
            background-color: #001534;
            position: absolute;
            border-radius: 100%;
            box-shadow: inset -2px 3px 0px rgba(0, 0, 0, 0.3);
            animation: dots 5s ease infinite alternate;
        }

        @keyframes dots {
            0% {
                box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.3);
            }

            100% {
                box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3);
            }
        }

        .loader > .content .planet .spots span:nth-child(1) {
            top: 20px;
            right: 50px;
        }

        .loader > .content .planet .spots span:nth-child(2) {
            top: 40px;
            left: 50px;
            width: 15px;
            height: 15px;
        }

        .loader > .content .planet .spots span:nth-child(3) {
            top: 80px;
            left: 20px;
            width: 25px;
            height: 25px;
        }

        .loader > .content .planet .spots span:nth-child(4) {
            top: 80px;
            left: 90px;
            width: 40px;
            height: 40px;
        }

        .loader > .content .planet .spots span:nth-child(5) {
            top: 160px;
            left: 70px;
            width: 15px;
            height: 15px;
        }

        .loader > .content .planet .spots span:nth-child(6) {
            top: 165px;
            left: 125px;
            width: 10px;
            height: 10px;
        }

        .loader > .content .planet .spots span:nth-child(7) {
            top: 90px;
            left: 150px;
            width: 15px;
            height: 15px;
        }

        .loader > .content p {
            color: #bacbd9;
            font-size: 12px;
            z-index: 2;
            position: absolute;
            bottom: -20px;
            font-family: "Mulish", monospace;
            animation: text 4s ease infinite;
            width: 100px;
            text-align: center;
        }

        @keyframes text {
            0% {
                transform: translateX(-30px);
                letter-spacing: 0px;
                color: #bacbd9;
            }

            25% {
                letter-spacing: 3px;
                color: #7ea1bf;
            }

            50% {
                transform: translateX(30px);
                letter-spacing: 0px;
                color: #bacbd9;
            }

            75% {
                letter-spacing: 3px;
                color: #7ea1bf;
            }

            100% {
                transform: translateX(-30px);
                letter-spacing: 0px;
                color: #bacbd9;
            }
        }
    </style>
</html>

Answer 1

你能再解释一下这个问题吗？您的任何样式是否正在加载，或者 css 是否根本没有加载？谢谢。

样式标签也应该在 head 标签中。

Answer 2

当在 Z 轴上使用带旋转或平移的变换时，Safari 有时无法正确理解 z-index。

如果我们调整 .cover-ring 选择器上的 translateZ，应该会把它推到圆环上方：

transform: translate3d(0px, -17px, 200px);

这意味着斑点包装纸也需要在 Z 轴上向上推。

transform: translateZ(200px);

参考：Whosebug answer

给定的 CSS 代码中有什么问题？它不适用于 iPhone

What is the problem in the given CSS code? It is not working on iPhone

html

css

iphone

frontend

reactjs