时间戳

首页 > 解决方案 > 在 Safari (iOS) 上对图片进行缩放转换

css - 在 Safari (iOS) 上对图片进行缩放转换

问题描述

问题出在 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; }
}
}

标签： csssafaritransform

解决方案

这个问题已经存在background-attachment: fixed;并且已经存在了很长时间，并且非常令人沮丧，cover并且fixed是非常常见的 CSS 背景参数。

这里的解决方案是取消fixedSafari。

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

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

推荐阅读