Image not showing iPhone (Ok on all devices including Android)

I looked through multiple posts on this but it doesn't seem applicable to my case. I've 2 background images that are not displaying on iPhone (only), it works fine for desktop and android

我查看了多篇文章,但这似乎不适用于我的案例。我有2个背景图像没有在iPhone上显示(仅限),它适用于桌面和Android

I have added this to index.html

我已将此添加到index.html

meta name="viewport" content="width=device-width, initial-scale=1.0"

In CSS they are both slightly coded differently, image1

在CSS中,它们的编码略有不同,image1

.jumbotron {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
  background-size: cover;
  background-position: center 15%;
  height: 100vh;
  background-attachment: fixed;
  background-repeat: no-repeat;
  margin-left: -20px;
  margin-right: -20px;
  border-radius: 1px;
  margin-bottom: 0rem;
}

And image2

.testimonials {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)), url(img/testimonials.jpg);
  background-size: cover;
  background-position: right;
  color: #fff;
  background-attachment: fixed;
  margin: 0px;
}

In terms of responsive sizing, I'll only adjusted for jumbotron's other elements (eg h1, button) but nothing specific for testimonials

在响应大小调整方面,我只调整了jumbotron的其他元素(例如h1,按钮),但没有特定于推荐书

Can anyone shed some light please? Thank you!

请问有人可以解决一些问题吗?谢谢!

1 个解决方案

#1

This is because iOS does not support background-attachment: fixed; fully. I will suggest to use background-attachment: scroll; for mobile devices using media query.

这是因为iOS不支持后台附件:fixed;充分。我建议使用background-attachment:scroll;用于使用媒体查询的移动设备。

@media (max-width:768px) {
  .jumbotron,
  .testimonials {
    background-attachment: scroll;
  }
}

You can check here for support

你可以在这里查看支持