iOS 6 Safari backgrounds missing

Question

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.

Answer 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.

Answer 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.