css - Transform 在 Safari (iOS) 上放大图片

Question

问题出在 iPhone 上，在 Android 手机上它的代码运行良好。在 Safari 上，背景图片被放大了，您可以在下图中看到:

在 Safari 上显示: Safari-view

在 Android 上显示(正确): Android-view

我可以使用该代码改进什么？

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; }
}
}

Answer 1

问题出在 background-attachment: fixed; 并且已经存在了很长时间并且自从 cover 和 fixed 以来非常令人沮丧> 是非常常见的 CSS 背景参数。

这里的解决方案是在 Safari 上修复 fixed。

我们所做的是使用 PHP 将设备和浏览器类添加到我们的主体中，并设置其自己的 CSS 声明

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