Преобразование CSS (вращающаяся анимация) сбоит в Safari (iOS)

У меня есть загрузчик на моем веб-сайте, который в основном представляет собой логотип, вращающийся в 3D в течение нескольких секунд, пока страница не загрузится. Загрузчик отлично работает во всех основных браузерах на Android и Windows, но сильно глючит на iOS (как в Safari, так и в Chrome).

Сбой в Chrome на iPhoneГлюк в Safari на iPhone

HTML:

<div id = "loader">
    <div id = "loader_spin_div" class = "d-flex justify-content-center">
        <img class = "img-fluid mx-auto" id = "loader_spin" src = "assets/img/Logo_329x329.webp" width = "500"
        height = "500" alt = "Refresh Your Browser To See The Animation!">
    </div>
</div>

CSS:

#loader {
    background: #ff9472;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2;
}

#loader_spin {
    animation: spin 1.5s linear infinite;
    border: 2px solid #fff;
    border-radius: 150px;
    display: block;
    -webkit-box-shadow: 11px -3px 48px 5px #fff;
    box-shadow: 11px -3px 48px 5px #fff;
    transform: rotateY(45deg);
}

@keyframes spin {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(179deg);
    }
    100% {
        transform: rotateY(1deg);
    }
}

#loader_spin_div {
    width: 18vh;
    margin: auto;
    margin-top: 18vh;
}

@media (min-width: 440px) {
    #loader_spin_div {
        width: 27vh;
    }
}

Я пробовал менять слои (z-индекс элементов), о чем читал в другой статье.

Это потому, что Safari на самом деле думает в реальном трехмерном пространстве. Половина вашего изображения исчезает за полностью цветным стеклом. Вам придется «поднять» элемент над панелью с помощью команды transform: translate. Также обратите внимание, что Safari и Chrome — это в основном одни и те же браузеры для iOS. Chrome использует механизм рендеринга Safari.

MaZoli 19.11.2022 09:01

Я пытался использовать transform: translateZ(100px);, но это все равно не сработало...

Boolean-Autocrat 20.11.2022 18:24

Вам нужно будет установить для родителя значение transform-style: save-3d; чтобы убедиться, что «сцена» настроена правильно.

MaZoli 21.11.2022 11:22

Извини. Хотя объяснение, которое я дал, было правильным, решение было неверным. Пожалуйста, проверьте мое предполагаемое решение ниже.

MaZoli 21.11.2022 11:40
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
4
138
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Safari мыслит в реальном трехмерном пространстве. Вращающееся изображение будет проходить «сквозь» панель при вращении, и половина его не будет видна. Вам придется «поднять» родительский контейнер вращающегося изображения над панелью.

Дополнительный совет: если вы установите «перспективу», вы получите настоящий 3D-эффект.

См. следующий пример — это будет работать в Safari:

#loader {
    background: #ff9472;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2;
    
}

#loader_spin {
    animation: spin 1.5s linear infinite;
    border: 2px solid #fff;
    border-radius: 150px;
    display: block;
    -webkit-box-shadow: 11px -3px 48px 5px #fff;
    box-shadow: 11px -3px 48px 5px #fff;
    transform-origin: center center;
}

@keyframes spin {
    0% {
        transform: rotate3d(0);
    }
    100% {
        transform: rotateY(360deg);
    }
}

#loader_spin_div {
    width: 18vh;
    margin: auto;
    margin-top: 18vh;
    transform: translateZ(100px) perspective(300px);
    transform-style: preserve-3d;
    
}

@media (min-width: 440px) {
    #loader_spin_div {
        width: 27vh;
    }
}
<div id = "loader">
    <div id = "loader_spin_div" class = "d-flex justify-content-center">
        <div class = "img-fluid mx-auto" id = "loader_spin">
          The world goes round and round!        
        </div>
    </div>
</div>

Это сработало, большое спасибо! Теперь выглядит намного лучше

Boolean-Autocrat 21.11.2022 15:17

Другие вопросы по теме