Everything was loading smoothly and looking great on ios5.
However, when ios6 came around, a strange issue arose with one section of my website. This particular section, which utilizes a png image as its background, would start to render on the iPad but then inexplicably turn black (while all other sections remained unaffected).
Here's the code snippet:
<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>
And here's the 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; }