У меня есть загрузчик на моем веб-сайте, который в основном представляет собой логотип, вращающийся в 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-индекс элементов), о чем читал в другой статье.
Я пытался использовать transform: translateZ(100px);
, но это все равно не сработало...
Вам нужно будет установить для родителя значение transform-style: save-3d; чтобы убедиться, что «сцена» настроена правильно.
Извини. Хотя объяснение, которое я дал, было правильным, решение было неверным. Пожалуйста, проверьте мое предполагаемое решение ниже.
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>
Это сработало, большое спасибо! Теперь выглядит намного лучше
Это потому, что Safari на самом деле думает в реальном трехмерном пространстве. Половина вашего изображения исчезает за полностью цветным стеклом. Вам придется «поднять» элемент над панелью с помощью команды transform: translate. Также обратите внимание, что Safari и Chrome — это в основном одни и те же браузеры для iOS. Chrome использует механизм рендеринга Safari.