iPad / ios6 not rendering png background image

Question

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; }

Answer 1

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.