Reputation: 1009
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
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
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
Reputation: 1
Just had a issue the same as this, re saving the .png
with the interlacing removed solved the problem.
Upvotes: 0
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
This immediately fixed my problems.
Upvotes: 3
Reputation: 175
What worked for me was not the same for all:
Just my experience
Upvotes: 0
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
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
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
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