CODEWITHSUNDEEP
htmlcssipadpngios6
John
John

Reputation: 1009

iPad / ios6 not rendering png background image

On ios5 the website loads fine and looks correct.

Since ios6 a section of my website that uses a png image as its background begins to render on the iPad but then the background just changes to black for no apparent reason (note all other sections stay the correct color).

code:

<section id="showcase">
    <section class="container">
    <img src="images/usp.jpg" alt="USP Screen" id="screen">

    <h2>title</h2>    

    <p>the text.</p>

    <p>The text.</p>
    </section></section>

CSS:

#showcase           { background: url(../images/showcasebg.png) repeat-x #ededed; height: 600px; position: relative; top: 87px; }
#showcase h2        { float: left; max-width: 422px; font-family: 'Lobster', cursive; font-size: 36px; margin-top: 20px; }
#showcase p         { float: left; max-width: 422px; margin-top: 20px; }

Upvotes: 7

Views: 6354

Answers (9)

Giuseppe Garassino
Giuseppe Garassino

Reputation: 2292

Changing the size of my img seems to work, but some strange issue happens when zooming... Eventually, the best solution for me it is saving the image as jpg.

Upvotes: 1

Zenexer
Zenexer

Reputation: 19621

I just encountered this on a webserver. The solution was to change the PNG from 8-bit integer precision to 32-bit. Apparently iOS can't handle 8-bit properly; I don't know about 16-bit. I think Photoshop might have done this automatically due to the low complexity of the image (a simple gradient). It was easy to fix in GIMP: Image -> Precision -> 32-bit integer

Upvotes: 1

Paul
Paul

Reputation: 1

Just had a issue the same as this, re saving the .png with the interlacing removed solved the problem.

Upvotes: 0

flynnduism
flynnduism

Reputation: 76

I've run into this issue as well on one of our sites. I had a mobile site using background PNG images for gradients, which appeared as black bars on iOS6 (Chrome and Safari Apps).

I fixed them easily by re-saving the images for web as

  • being at least 10px wide
  • saving them as non-interlaced PNGs

This immediately fixed my problems.

Upvotes: 3

estern
estern

Reputation: 175

What worked for me was not the same for all:

  • Some images it worked by removing the interlacing
  • Some images i removed the interlacing but then had to remove the transparency as well and this seemed to fix the issue
  • I tried to mess around with the widths but i dont think that it is that either.

Just my experience

Upvotes: 0

user1702989
user1702989

Reputation: 11

Just experienced the same problem, under iOS6 Safari. A repeat-x .PNG background-image that appeared black. Under heavy time pressure I saved it as .JPG and solved the render problem.

Upvotes: 0

user1685048
user1685048

Reputation: 23

We had a similar problem.

We just opened the PNG in PhotoShop and re-saved it, and after that it displayed okay. We didn't change the colour profile or anything like that - just opened it, left all the settings the same, and saved it again, and then it was fine.

We have a number of PNG backgrounds on our site, but only two particular PNGs weren't displaying correctly. So we reckon maybe those two in particular were saved with glitches or something when they were first created.

Who knows. shrug

Upvotes: 0

Emmanuel Ord&#243;&#241;ez Angulo
Emmanuel Ord&#243;&#241;ez Angulo

Reputation: 1

Similar issue here. All pages under the work section of my website (http://paulcremoux.com/en/trabajo/) feature a long png. Often images stop loading before they are complete; other times they load and then sort of crash. (You have to have a look at a couple of the pages because it might seem to work fine at first.)

Only happening on ios6.

Upvotes: 0

Aaron Madsen
Aaron Madsen

Reputation: 11

I'm not sure if it is directly related, but I had a similar issue last night. I was using a relative URL for the image and found that iOS6 was encoding spaces in the image path as %2520 instead of %20. This was an issue for me because I was viewing an image resource in a web view in an app on simulator, so the path to the resource provided by the simulator has spaces in it. This isn't an issue on device, where there are no spaces in the path.

I found the new remote inspector (mentioned here: http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers) very useful in determining what was going on.

Upvotes: 1

Related Questions