Background Image Issue on Safari under IOS9.2

Every time Apple publishes a new version, I’m excited to upgrade it. However this time, it’s just a bit painful.

I worked on a website which I used “background-size: cover” to make the background image show in the entire area. This property worked fine with older version, it just doesn’t work on the new version in some specific situations. It works fine on other pages, only the page I worked on that had this problem. Whenever I added the -webkit prefix or not, it just didn’t come out. After I tested with all the background properties, I found that the browser didn’t recognize background-size property was “cover”, which was weird. Although I didn’t understand why it occurred, it seemed this was the key issue that blocked the image. So I changed background-size: cover to fixed. It worked fine with portrait, but not on landscape. I felt they were against with each other. I couldn’t define the same property for both portrait and landscape. And finally, the solution I came out with, one set with “fixed” value (background-image: fixed), and another set as “auto” (background-image: auto).

This solves my situation temporary, but it doesn’t work when the background image is smaller than target area, because one of the property is “auto”. That means, I have to make the background image bigger enough that can work on large screen as well (like iPad pro).

The solution came out was not perfect, but at least it works on iPhone and iPad now. This issue is very specific, I have no idea why it doesn’t work on only one page(there’s only texts on this page, no Javascript, no additional functions, only plain texts), while working perfectly on other pages.