4

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.

user1532189
  • 113
  • 2
  • 6

3 Answers3

7

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.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • 1
    I've reported this bug to Apple (Problem id: 12374483) – Paul LeBeau Sep 26 '12 at 06:33
  • Which is interesting since all my images are set that way. Though, it all does come down to, it is a bug on Apple's side, but we have to solve these things before they do. – user1532189 Sep 26 '12 at 21:12
5

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.

user1532189
  • 113
  • 2
  • 6
  • 1
    yeah cause Chrome iOS uses UIWebView for webpage rendering http://stackoverflow.com/questions/11259152/chrome-ios-is-it-just-a-uiwebview – j03w Dec 20 '12 at 06:26
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.

Benji Rage
  • 31
  • 1
  • I am working on saving new versions of the images to test that. I will let you know if that also works for me. Thank you! (Glad also to know that I am not the only one out there that had this issue.) – user1532189 Sep 21 '12 at 12:09
  • First quick attempt didn't solve it, but I will take some more time and get back to you. – user1532189 Sep 21 '12 at 12:33