iPhone（Safari 和 Chrome 都有）位置：修复错误？

Question

我有这个网站

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

Bug screenshot

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 道具，并从 .preloader 本身中删除所有定位内容。