No source code for iOS 6 Safari

Question

I looked through questions and search engines, but it was probably too early for the answers to be indexed or found.

In any case, when I was working with one of my projects, suddenly many background images ceased to be displayed. This happened after the transition 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> 

Most likely, something is stupid, because not all background images were made, and that just makes it even more unpleasant. I'm confused. Example 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 tried to make the code "the same", but still the same question. I am currently looking at images as a problem, but it really doesn't make any sense.

Thank you in advance for your thoughts / help, etc.

Answer 1

From testing and training, as well as from the use of Photoshop.

The problem that I saw using png files that were used for background images will turn black. All the files I had problems with had 1 pixel wide x with some height (from 20 to 700 pixels). These files were also tagged in Photoshop to provide transparency.

The widths of all sizes were checked in comparison with the previous recommendation and experience. This, however, did not solve the problem that I saw.

After testing, I noticed (as before) that all files that had a problem were configured to support transparency. I tested it turned off and it all mattered.

So, from what I did, all the files were the same size as before the size of the wise, but they supported transparency.

This does not mean that there is no related problem with iOS 6 and the size of png images, but I did not solve what problem I saw.

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

Answer 2

I did a bunch of testing because I hit the problem myself.

The problem has nothing to do with size, width, transparency, or x-repetition, it's INTERLACING. Load the image into the image editor and save with alternating OFF, and it should work.

Answer 3

I also experienced this unpleasant problem.

I found that the reason seems to stem from x PNG repetition backgrounds where the image width is 10 pixels or less. Increasing the width of each affected image to 50px solved the problem for me.