iOS 6 Safari backgrounds missing

问题:

I have been digging through the questions and search engines, but likely it is just too early for the answers to have been indexed or found.

Anyway, when I was working with one of my projects, suddenly many of the background images stopped showing. This occurred after upgrading to iOS 6 on the iPad.

As an example:

<td style="background-image:url(https://mysite.com/_itemg_ver1.png); background-repeat:repeat-x; height:24px; width:100px;">Some content</td>

It is likely something stupid since not all background images were effected, and that just makes it all the more frustrating. I am confused. Example of working code:

<td style="width:925px; height:44px; background-color:#ffffff; background-image:url(https://mysite.com/ll_corner_ver1.png); background-repeat: no-repeat; background-position:bottom left;">Some content</td>

I have tried making the code 'the same', but still the same problem. I am currently looking into the images somehow being the problem, but that doesn't really make any sense.

Thank you in advance for thoughts/help, etc.

回答1:

I've done a bunch of testing due to striking the problem myself.

The problem has nothing to do with size, width, transparency or repeat-x, it is INTERLACING. Load the image into your image editor and save with interlacing OFF and it should work.

回答2:

From testing and learning, and the use of photoshop.

The problem that I saw with the use of png files that were used for background images, would turn black. All of the files that I had problems with were 1 pixel wide x some height (between 20 and 700 pixels). These files were also marked, within photoshop, to support transparency.

Widths of all sizes were tested, per the earlier poster recommendation and experience. That however did not solve the problem that I was seeing.

After testing that, I noticed (as I hadn't before that point) that all files having the problem were set to support transparency. I tested disabling that and it made all the difference.

So, from what I did, all files were the same size as before dimension wise, but had support for transparency disabled.

This is not to say there isn't a related problem with iOS 6 and the dimensions of the png images, but that was not how I resolved the issue I was seeing.

Also note, this was not only on Safari. This was also seen on Chrome, within iOS 6.

回答3:

I too experienced this frustrating issue.

I found the cause seemed to stem from repeat-x PNG backgrounds where the width of the image was 10px or less. Increasing the width of each affected image to at least 50px solved the problem for me.