Jump to content


Photo
Open

Mobile View Whitehouse Pro



Best Answer rodgerzeislernet , 29 November 2012 - 07:36 PM

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.

Go to the full post


  • Please log in to reply
14 replies to this topic

#1 kingsembassy

kingsembassy

    Newbie

  • Members
  • Pip
  • 6 posts
  • LocationWashington, DC

Posted 04 October 2012 - 01:40 PM

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!
  • assomibatrifs likes this

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 04 October 2012 - 03:23 PM

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?
  • assomibatrifs likes this

#3 kingsembassy

kingsembassy

    Newbie

  • Members
  • Pip
  • 6 posts
  • LocationWashington, DC

Posted 05 October 2012 - 03:34 PM

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:
Posted Image
Posted Image

Any ideas? Thanks again for your help!
  • assomibatrifs likes this

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 05 October 2012 - 04:43 PM

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

#5 kingsembassy

kingsembassy

    Newbie

  • Members
  • Pip
  • 6 posts
  • LocationWashington, DC

Posted 05 October 2012 - 05:08 PM

No, it doesn't occur with other themes.

#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 October 2012 - 03:14 AM

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



#7 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 October 2012 - 03:17 AM

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?

#8 kingsembassy

kingsembassy

    Newbie

  • Members
  • Pip
  • 6 posts
  • LocationWashington, DC

Posted 09 October 2012 - 02:27 PM

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.

#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 09 October 2012 - 02:44 PM

No problem!

#10 rodgerzeislernet

rodgerzeislernet

    Newbie

  • Members
  • Pip
  • 3 posts
  • Country: Country Flag

Posted 29 November 2012 - 07:36 PM   Best Answer

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.



#11 rodgerzeislernet

rodgerzeislernet

    Newbie

  • Members
  • Pip
  • 3 posts
  • Country: Country Flag

Posted 29 November 2012 - 07:50 PM

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.



#12 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 29 November 2012 - 11:54 PM

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.



#13 rodgerzeislernet

rodgerzeislernet

    Newbie

  • Members
  • Pip
  • 3 posts
  • Country: Country Flag

Posted 30 November 2012 - 05:33 PM

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.


#14 junico

junico

    Member

  • Members
  • PipPip
  • 13 posts
  • LocationParis
  • Framework Version:iblogpro4
  • Country: Country Flag

Posted 02 December 2012 - 10:39 AM

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



#15 blogbloke

blogbloke

    Newbie

  • Members
  • Pip
  • 1 posts
  • Country: Country Flag

Posted 28 December 2012 - 08:06 PM

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