Преобразуйте, увеличивая изображение в Safari (iOS) - PullRequest
Новая
       12

Преобразуйте, увеличивая изображение в Safari (iOS)

0 голосов
/ 29 апреля 2018

Проблема на айфонах, на андроид мобильных телефонах код работает хорошо. В Safari фоновая картинка увеличена, вы можете увидеть это на картинке ниже:

Отображение в Safari: Safari-вид

Отображение на Android (правильно): Android-вид

Что я могу улучшить с помощью этого кода?

HTML: 

<div id="background">
     <h2>Lorem ipsum</h2>
      <hr />
     <h3>Dolor sit amet</h5>
</div>

CSS: 

#background{
height: 92.5vh; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: mymove 16s infinite;
animation: mymove 16s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background-image: url("gallery/DSC03389n.JPG");
}

@keyframes mymove {
0%{background-image: url("gallery/DSC03389n.JPG");}
46%{background-image: url("gallery/DSC03389n.JPG");}
54%{background-image: url("gallery/DSC03385n.JPG");}
100%{background-image: url("gallery/DSC03385n.JPG");}
from { background-position: 17% 0; }
to { background-position: 70% 0; }
}

@media screen and (max-width: 600px) {

#background{
    background-image: url("gallery/DSC03389m.JPG");
}
  @keyframes mymove {
0%{background-image: url("gallery/DSC03389m.JPG");}
46%{background-image: url("gallery/DSC03389m.JPG");}
54%{background-image: url("gallery/DSC03385m.JPG");}
100%{background-image: url("gallery/DSC03385m.JPG");}
from { background-position: 17% 0; }
to { background-position: 74% 0; }
}
}

1 Ответ

0 голосов
/ 29 апреля 2018

Проблема связана с background-attachment: fixed; и существует уже очень давно, и это очень расстраивает, поскольку cover и fixed являются невероятно распространенными параметрами фона CSS.

Решение здесь состоит в том, чтобы отключить fixed в Safari.

Что мы сделали, так это добавили в наше тело класс устройства и браузера и установили собственную декларацию CSS 

.ipad #background,
.safari #background {
    background-attachment: scroll;
}
...