iPhone / iPad背景图片上的错误元素

Question

I have an issue where, ocassionally, when I set a background image on an HTML element it displays a completely random image that is also set as a background image elsewhere on the page.

For example, I have a list item that has a background image "myimage-abc.jpg". I also have a div with a background image of "myimage-123.jpg". Everything is as expected for most people however for some Apple users (of which my Managing Director is one) the image "myimage-123.jpg" shows up on the list item as well as the div.

Has anyone else had this issue before? Any ideas how to get around it?

Thanks

Answer 1

Use inspect element on the element with incorrect background image and see which CSS selectors are overriding the background image that you want to have.

Then report back with the CSS selectors responsible for styling the elements in here. Keep in mind that CSS selectors are very particular about the way in which you use them.

Until then here's something that could be causing your problem, without my knowing your current CSS state.

From an answer on another question :

I've dealt with this before and it's always a strange issue. So here are some thoughts and examples of CSS behavior.

In CSS we have a hierarchy decided both on how you select an element and on its position within your stylesheet. Take for example the following CSS selectors:

body .test-parent .test-child {
    color: red;
}
body .test-parent .test-child {
    color: blue;
}

The result in this case would return color: blue; as the final style as it is the last read declaration for that elements color value.

However if we declare the following:

body .test-parent-two .test-child-two {
    color: red;
}
body .test-child-two {
    color: blue;
}

Then the final value is color: red; . This caught me off guard and it took me a while to notice the pattern and fix.

The problem here lies in the selectors. A more in-depth selector (longer / includes more in-between children) will override any others as can be seen by this JSFiddle .

Hope that also helps!