На моем сайте есть два фоновых изображения, оба с CSS. Исходное изображение целевой страницы отлично работает как на настольном компьютере, так и на мобильном, однако второе изображение в Safari искажается. Я перепробовал каждое решение, которое нашел в Интернете, но ничего не работает
Исходное изображение было изначально искажено, но я нашел для него решение в Интернете, которое отлично работает и заключается в следующем (на всякий случай, если это актуально):
'''
<div class="home-wrap">
<div class="home-inner">
</div>
</div>
'''
'''
.home-wrap {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.home-inner {
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
z-index: -100;
max-width: 100%;
overflow-x: hidden;
}
@media only screen and (max-width: 767px) {
.home-inner {
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../images/bgmob.jpg');
background-size: cover;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
overflow-x: hidden;
}
}
'''
Ниже приводится второе искаженное фоновое изображение:
'''
<div class="bg-wrap">
<div class="fixed-background">
</div>
</div>
'''
'''
.bg-wrap{
position: relative;
height: 100%;
width: 100%;
}
.fixed-background {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../images/bg2.jpg);
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
position: relative;
margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
.fixed-background {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/bg2mob.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: scroll;
position: fixed;
height: 100vh;
overflow-x: hidden;
}
}
'''
Я знаю, что мобильные браузеры Safari плохо реагируют на фоновое изображение, но я подумал, что если первый заработает, второй тоже должен работать. Я чувствую, что это может иметь какое-то отношение к позициям. У меня также есть небольшие, более мобильные, дружественные изображения для мобильных браузеров, которые видны в вышеупомянутых медиа-запросах. Я пробовал бесчисленные решения, так что это моя последняя отчаянная попытка.