14 replies to this topic

[kingsembassy]

We are having problems in viewing our blog in mobile devices (iphone/ipad). There is a black box appearing in all the blog posts. Any help you can give would be appreciated.

http://kingsembassy.com/eblog

Thanks!

[catrina]

Hello,

I saw your other thread addressing this topic. For future reference, please stick to a single topic per thread instead of reposting so that the communication can stay in one place.

I'm not sure where those black boxes could be coming from. Are these boxes appearing behind certain text areas?

[kingsembassy]

Sorry for the double post... I didn't see this thread until later and thought it was more important.

Here are a couple screen shots:



Any ideas? Thanks again for your help!

[catrina]

It seems to be happening with certain posts. If you activate a different theme, does the problem still occur?

[kingsembassy]

No, it doesn't occur with other themes.

[James B]

Looking at the screen shots and then looking at the code in those particular areas it looks like the mobile browser can't cope with the background image applied to the bottom of the posts. Its a semi-transparent png which rests on top of a white bg color, as shown in the code below.

 
.post {
    background: url("../images/post-bg.png") repeat-x scroll left bottom #FFFCFC;
    clear: both;
    overflow: hidden;
}

You could remove the background image by using css, this would resolve the problems on mobile devices but obviously you wouldn't have that nice bg effect where it fades to blue at the bottom of the posts. If you do want to remove it you can use the below css.

 
.post {
    background: none;
    clear: both;
    overflow: hidden;
}

[James B]

However, I've checked your site on my Iphone and I'm not seeing the same results as you are in the screen shots. Have you checked on other devices as well?

[kingsembassy]

James,

I did what you said and it brought results! Thank you. We are not seeing the problem anymore.

In response to your question, we had only tried it on iPhones and iPads (several different ones on different networks).

Thanks again for your help.

Catrina, thank you too.

[catrina]

No problem!

[rodgerzeislernet]

I had a similar issue when I was viewing my WhiteHousePro3 themed website http://www.everestgrp.com/ I did a little more research and found that IOS devices had an issue with semi-transparent png files that were only 1x1 pixels (see http://stackoverflow...n-mobile-safari).  I used an image editor to expand post-bg.png from 1x268 to 2x268.  Using this expanded image, all my webpages look like they did before on desktop browsers and also look good on IOS device (Safari and Chrome) browsers.

[rodgerzeislernet]

Does anyone know if this was an IOS5 vs IOS6 issue?  I can't find anyone with an IOS5 device to test this theory on.

[James B]

Hi, I think it was an error which only appeared on IOS6. I'm on IOS 4.3.5 (i can never be bothered to upgrade), I checked your site (display's mobile version first but option to switch off at the bottom ) and the normal site is displaying fine, no black areas.

[rodgerzeislernet]

I got ahold of an iPad (original) with IOS 5.1 on it.  I unfixed my website and it was still fine (no black boxes).  So the issue became a problem between IOS 5.1 -> IOS 6.0.

 

I walked thru the office and asked about 20 people if they had the old version and all of them had upgraded to IOS 6.  The iPad with IOS 5.1 came from somebodies home that had battery issues when they upgraded their iPhone to IOS 6 so they were holding off...lucky for me!

Edited by rodgerzeislernet, 30 November 2012 - 05:33 PM.

[junico]

Hi From France !

I ve met this issue too ...

Three awful black blocks on each page of www.whereelse.fr in using iphone or ipad under ios5 & 6

don't have strong skills to manipulate css files

who can help me

 

Big thx

 

Gilles

[blogbloke]

Resaving "post-bg.png" in Photoshop with Interlaced turned off fixed it for me.