Archived

This topic is now archived and is closed to further replies.

  • 0

Mobile View Whitehouse Pro

Question

Posted · Report post

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!

1 person likes this

Share this post


Link to post
Share on other sites

14 answers to this question

Posted · Report post

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.com/questions/1374618/alpha-transparent-pngs-not-displaying-correctly-in-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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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:

photo-3.jpg

photo-2.jpg

Any ideas? Thanks again for your help!

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

No, it doesn't occur with other themes.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

No problem!

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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;

}


Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites