Question

我有这个网站

在桌面上一切正常，但在iPhone（Safari和Chrome两者）上我有预加载器的问题：

CSS：

    .preloader_wrapper {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: #000;
        z-index: 100500;
    }
    .preloader {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        width: 50px;
        height: 50px;
    }
    .preloader::before {
        content: '';
        position: absolute;
        box-sizing: border-box;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 4px solid #951b25;
        border-left-color: transparent;
        border-right-color: transparent;
        animation: spin 1s linear infinite; 
    }
    @keyframes spin {
        0% {
            transform: rotate(0deg) scale(1);
        }
        50% {
            transform: rotate(45deg) scale(1.2);
        }
        100% {
            transform: rotate(360deg) scale(1);
        }
    }

HTML：

   <div class="preloader_wrapper">
        <div class="preloader"></div>
    </div>

由于我的谷歌搜索，我认为问题是在位置固定。怎么解决？

Answer 1

嗯，我认为.preloader绝对定位可能会解决它。我现在正打电话，所以无法对其进行测试。否则我建议尝试显示;柔性;使用.preloader_wrapper上的justify和alignment props，并从.preloader本身中删除所有定位内容。

iPhone（Safari和Chrome两者）的位置：修复bug？

1 个答案: