Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

WordPress + iPad content loading bug WordPress

  • SOLVED

<strong>///UPDATE///</strong>

I have actually figured out the bug myself! Below is the bug and the fix. I think it should be noted for future use. :)

<strong>The Bug</strong>

The bug was cause by using the :empty CSS selector. I had set that selector on certain elements (particularly the <p> tag) to display: none;. This is what caused the iPad to go haywire. Apparently it does not like this call and causes content to unnecessarily hide on the page load. Somehow when you click, it recognizes that the content is actually there and shows it.

<strong>The Fix</strong>

The fix is simple. Either you can take out the :empty selector altogether (which I do not recommend - it is quite useful for WordPress) or you can add this code in your CSS sheet:

@media only screen and (device-width: 768px) { :empty { display: inline-block; } }

This gets rid of content hiding issue, and as far as I can tell, the iPad already fixes the empty HTML tags anyways, so no harm is done.

Thanks again for everyone who contributed - you will all get a share of the cash. :)

Hello,

I have the most peculiar bug pertaining to WordPress and the iPad that I would like to get fixed. I'm hoping that some WordPress ninjas can give me guidance.

Here is the link for reference: [[LINK href="http://shooters.tgmtestserver.com/"]]http://shooters.tgmtestserver.com/[[/LINK]]

If you click on the tabs in the navigation menu, eventually you will notice that not all the content loads on a page (mainly the navigation menu and various other content). When that happens, all you need to do is click on some sort of hyperlink on the page, and the rest of the content will show. Why is it doing this? This is a really annoying bug and I want to see if it is my WordPress code or the iPad that is causing this issue. I've tried removing all the JavaScript, deactivating all the plugins, nothing is working to fix this issue!

Any help would really be appreciated!

Thomas

2011-03-04 by Thomas Griffin

Answers (4)

2011-03-04

Denzel Chia answers:

Hi,

I used my iPad to view your site, and strangely true, the menu got hidden after you loads a new page.
I don't really know what is causing this, but maybe you can add jQuery to show menu after everything loads?

in footer.php at the end of all scripts add the following

jQuery(document).ready(function(){
jQuery('.menu').show();
});


Hope it helps.

Thanks.
Denzel

Denzel Chia comments:

Hi,

I also found a piece of jQuery that does not activate anything on home page because there is no #archive_wrapper html tag. This is probably the issue. Maybe this code is needed on other page,
you could use wordpress conditional function to show on the required page, instead of showing on all pages.

The below is the mentioned snippet of code found in footer. Perhaps, commenting it out will solve your issue?


jQuery(document).ready(function(){
function callback() {
jQuery("#archive_wrapper").fadeIn(700);
}
jQuery('.numbered_nav a').live('click', function(){
var link = jQuery(this).attr('href');
jQuery('#archive_wrapper').fadeOut(500);
jQuery('#archive_wrapper').load(link+' .portfolio-archives', callback);
});
});


Hope it helps.

Thanks.
Denzel

Thomas Griffin comments:

That would be nice if it were only the menu that were the issue. But, for example, sometimes the home page doesn't load the menu nor the content under the "In the News" title. There must be another issue here.

Thomas Griffin comments:

I also removed that piece of code, but with no luck. :(

2011-03-04

Peter Michael answers:

Try disabling your custom fonts and see if that causes the issue.

Thomas Griffin comments:

Disabling the custom fonts did not work either. :-/

This bug is really, really puzzling. I've never had it happen before and have no clue why it is doing it.

Peter Michael comments:

Strange. Can you try set a fixed height for both header & footer? I see a flicker in FF/Win as well until all elements in the header are loaded.

Peter Michael comments:

Nice find! :)

2011-03-04

Oleg Butuzov answers:

can you test this?

remove this for ipad user agent
text-indent: -9999px;

Thomas Griffin comments:

Tried this, but it does not work either. :-/

However, it did teach me how to use iPad specific CSS, so for that I am thankful. :)

Oleg Butuzov comments:

can you check how menu will appear without position:relative for header...

last time i got porblems wth position fixed and ipad....

2011-03-04

Dan | gteh answers:

I know this is a small thing, but check your site in the w3c validator. There are some errors regarding <p> tags not being closed properly etc... just a few.. 4 errors on home page, 1 error on gallery page. Try fixing up the validation errors and it may fix the problem.

Browsers like Firefox and Chrome are able self-correct basic errors but I dont think mobile safari does that.

example:

Line 4, Column 5202: end tag for element "p" which is not open
…width="252px" height="142px" /></a></p><h3 class="home_title">Anthropologie</h…

Thomas Griffin comments:

I validated the Contact page, and even when it is validated, the iPad is still hiding the content until you click on some sort of hyperlink. Then all the content will appear. Not saying that I shouldn't finish validating everything because I will, but I just don't think that is the issue.