固定的背景图片在iPhone/iPad上消失 [英] Fixed background images disappear on iPhone/ iPad

问题描述

我遇到background-image的问题.我的网站在Android设备上看起来不错，然后我发现iPhone和iPad不喜欢background-size: cover.

I'm having issues with background-image. My website looked good on Android devices, then I found out that iPhones and iPads don't like background-size: cover.

我通过设置background-size: 100%来解决此问题.

I fixed this by setting background-size: 100%.

在网络上的iPhone模拟器上，该站点看起来还不错，但是在真实的iPhone(iOS 9.3)上测试该站点后，背景图片将不会显示.

On iPhone simulators on the web, the site looks quite OK, but as soon as testing the site on a real iPhone (iOS 9.3), the background images are not shown.

将加载标题图像，该图像将用作站点下方的背景，并且也会在此处显示. 唯一已加载的背景上方的另一张图片开始加载，但由于某种原因似乎中止了.

The header image loads, this image is used as a background further down on the site, it gets displayed there, too. The other image right above the only loaded background starts loading, but then seems to get aborted for some reason.

图片大小为:1920x1080.

The size of the images is: 1920x1080.

网站: http://www.unterwasserfotografie-thomas-uhl.de/

更新:

我从下面尝试了Aziz的解决方案. 在背景尺寸下玩:自动100％使图像在智能手机上看起来更好，但未在移动苹果设备上加载. 但是，如果设置了background-size:cover，则所有背景都将被加载，问题是仅显示了图像的一小部分(图像的右上角?！)，而这部分很模糊(看起来像放大). 由于我除了将background-size:cover设置为background-size:100％auto之外没有做任何更改，所以我不敢相信图像彼此堆叠.

I've tried Aziz' solution from below. Playing around with background-size:auto 100% makes the images look better on the smartphone, but they are not loaded on mobile apple devices. However, if background-size: cover is set, all of the backgrounds are getting loaded, the problem is, that only a small part of the image gets displayed (the right top of the image?!) and this part is quite fuzzy (looks like zoomed in). As I did not change anything than set background-size:cover to background-size:100% auto, I cannot believe, that the images are getting stacked on each other.

此刻，我再次设置了背景尺寸:100％，这在台式机设备上看起来最好，并且到目前为止对于移动设备来说还可以，只要背景不适合，我就不必担心布局问题正确加载.

At the moment I've set the background-size:100% again, this looks best on Desktop devices and is ok so far for mobile devices, I won't start worrying about the layout as long as the backgrounds are not loaded correctly.

我了解，背景大小:100％自动不是背景的最佳选择，并且会明确考虑解决方案1.我不明白的是，为什么在加载网站时根本只加载一个背景在iPhone上. background-position:center是否只是将所有背景堆叠在屏幕上的同一位置，以便我只能看到已加载的最新背景?请记住:该网站上总共有大约6个背景，但只显示了其中一个背景，该背景的标题中也使用了该背景.

I understand, that background-size: 100% auto is not the nicest way for backgrounds and will definetly consider solution 1. What I do not understand is, why there is only one background being loaded at all, when loading the site on an iPhone. Does background-position: center simply stack all the backgrounds at the same position on the screen, so that I can only see the latest one that has been loaded? Remember: There are about 6 backgrounds at all on the site, but only one of them is shown, its the one that has its image used in the header as well.

谢谢您到目前为止的支持，我将悬赏这个问题，因为我真的对这个问题感到绝望.

Thank you for your support so far, I will set a bounty to this question as I am really getting desperate on this problem.

推荐答案

此处的主要问题之一是iOS移动设备在渲染background-size:cover;和background-attachment:fixed;时出现错误.

One of the main problems here is the fact that iOS mobile devices have errors rendering background-size:cover; along with background-attachment:fixed;.

因此，一个简单的解决方法是使用媒体查询来更改移动设备(屏幕宽度小于640px)上的background-attachment属性:

Therefore an easy fix would be to use a media query to change the background-attachment property on mobile (screen width less than 640px):

CSS:

@media (max-width:640px) {
  section {
    background-attachment:initial;
  }
}

通过更改移动设备上的background-attachment属性，您将允许图像在iOS设备上正确显示.

By changing the background-attachment property on mobile, you will allow the images to display properly on iOS devices.

-编辑- 根据以下问题: stackoverflow.com/questions/18999660/背景的速记顺序似乎存在问题iOS上的媒体资源.

---EDIT--- According to this question: stackoverflow.com/questions/18999660/ there seems to be a problem with the shorthand ordering of the background property on iOS.

也许尝试像这样转换您的短手:

Maybe try to convert your short hand like this:

.bg-1 { 
  background-image: url(../Dateien/sharkGround1920.jpg); 
  background-size: cover; 
  background-attachment:fixed; 
}

这篇关于固定的背景图片在iPhone/iPad上消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！