views:

1549

answers:

11

Alright guys, here's a tough one...

In reference to this page.

The page will seemingly randomly not display the output of server when using Firefox (version 3.5). I have not seen this problem occur in Safari or IE. The best way to have the problem occur is just reload the page about 10 times and it ought to have happened by then, and once it does - it'll continue on subsequent refreshes until you change the page.

The problem is literally the browser not displaying the output (code). Viewing the source shows all the appropriate code yet the browser displays a blank white page. The web developer and firebug plugins don't show any errors that would indicate the problem. I have tested this on a separate system and OS and it occurs in Firefox on that system as well.

The problem did not occur until after TinyMCE (A Rich Text Editor JavaScript library for textareas) was added to the project. TinyMCE works however, where it should.

I know this is a confusing problem, but I am completely lost as to what could be causing this significant issue. Thanks in advance.

EDIT: If it's any help... I've noticed that if I cause a css file error by changing a stylesheet source to something non-existant (xxx.css), the page will continuously display without a problem (besides whatever related css not showing due to the src change). I've also noticed that causing any simple javascript error with some bad code will cause the page to load properly continuously (besides of course javascript not running on the page).

EDIT#2: Moving all <script> tags down at the tail of the <body> 'fixes' (well, hides) this error and the page shows normally. A band-aid.

A: 

I've tried my best at navigating, refreshing and generally mucking about with different browser sizes on FF 3.5 but I honestly can't make your site disappear! It it displayed every time.

Sohnee
Figures... I can't possibly see this being host (IP/ISP) related. I've got the problem continuously happening on both a Leopard system running FF 3.5 and an XP laptop running FF 3.5.
Chris Cooper
It happens for me ( 35 + linux ), but that said, I'm in NZ, so theres substantial latency for me.
Kent Fredric
+2  A: 

Firebug reports the tag to be empty when It fires as blank, so it would appear that one of your javascripts are deleting the page content.

Only way to know which one it is would be disabling them and then seeing if the problem subsides.

Also, it could be a race condition with that document.write cruft at the bottom. I know google has its special way of doing things, but document.write is so 1995.

Firebug also caught an error for me in the console:

 Expected identifier or string for value in attribute selector but found '#'.

Where this comes from I cant tell.

May I also note you have a LOT of inline javascript, and that's generally never a good thing.

Lazy Load?

For an experiment, you could try lazy-loading the javascript, that is, moving all tags that are plausbile to do so with down to as low in the page as possible, so they don't stall loading and don't stall rendering, but leave your stylesheet references at the top.

Problem I've seen before but can't remember when

When you're streaming your javascript content gzipped with PHP, its not sending any content-length information. I have on odd occasions seen this yield odd behaviour.

There's a bit of magic dirt I recall using to make it possible:

ob_start;
ob_start('ob_gzhandler');

    // Gzipped code outputted here 

 $data = ob_get_clean; 
 header("Content-Length: " . strlen( $data )); 
 print $data;
 ob_end_flush;

But thats probably not likely to help.

Kent Fredric
So you have indeed seen the problem then... At least I'm not losing my mind then. Cutting out the Google Analytics code did not change/fix it. Yes, I see Firebug says the body tag is empty when there is no content which more or less makes sense; just have no idea what would do this. Eliminating TinyMCE (javascript) causes the problem to go away, but when the page does operate (at random) - TinyMCE functions as normal. I've used the same copy of TinyMCE on other sites without issue, so I'm not certain it is directly TinyMCE's fault..
Chris Cooper
Theres always the interaction of different things that can cause things to play up, sadly this is the internet sucking in general and different librarys not playing well with each others balls.
Kent Fredric
The javascript error almost certainly comes from the line that contains `$('a[href*=#]')` - that should be `$('a[href*="#"]')`
Daniel Martin
Well changed that $('a[href*="#"]') problem. Thanks. Too bad it didn't magically fix everything ;)
Chris Cooper
Kent, no such luck using the suggested magic dirt ;)
Chris Cooper
A: 

I ran the "Page Speed Activity" on your site, and it was using 6.5seconds each time, with the tinyMCE gzip taking about 70% or so of that time each time. I would suggest looking for another editor, if you don't need all the functionality of tinyMCE.

Have you had a look at its little brother punyMCE?

Might be something completely different, though. Try doing as Kent suggests, with disabling one JS at the time to find the source...

peirix
Yes, TinyMCE can be a monster. The site is still in development and TinyMCE will (in the future) only be loaded when an admin is on the site (only time TinyMCE is in use). Thanks!As mentioned, disabling TinyMCE fixes the problem but I am using the same install of TinyMCE as I have before (where there were no issues).
Chris Cooper
A: 

i can reproduce this, strange indeed. the only issue i notice is that when the page does come up blank, firebug shows a self closing body tag

there is quite alot of javascript at the top of your code - do you need all of it? id remove all of it and then add it back, one function at a time and see which one causes the issue. it definitely seems to be JS related.

Yes, I'm still developing the site - the JS will be moved out of the index later ;)
Chris Cooper
A: 

I notice this in your page:

    <script type="text/javascript">
 /* <![CDATA[ */
 tinyMCE_GZ.init({   
  doctype : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;',
  plugins : 'style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,'+ 
         'searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras',
  themes : 'advanced',
  languages : 'en',
  disk_cache : false,
  debug : false         
 });
 </script>

 <script type="text/javascript" src="/js/tiny_mce/jquery.tinymce.js"></script>

I don't see any closing ]]> sequence to end the CDATA chunk. If firefox 3.5 is occasionally choosing to parse your page not in its normal quirks mode but in a variant that respects xml structure, that could be your problem. (These different parsing decisions could well be a result of network timings, and how much of the HTML is arriving to the browser in a single packet) The entire content of the page would end up inside the CDATA block!

One way of testing this is to use firebug's "HTML" tab and see if the document structure has all of the source content inside the script tag that calls tinyMCE_GZ.init.

Of course, you could also do the right thing and close your CDATA block, and just see if that fixes the problem:

<script type="text/javascript">
/* <![CDATA[ */
tinyMCE_GZ.init({           
    doctype : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;',
    plugins : 'style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,'+ 
        'searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras',
    themes : 'advanced',
    languages : 'en',
    disk_cache : false,
    debug : false                                   
});
/* ]]> */
</script>

<script type="text/javascript" src="/js/tiny_mce/jquery.tinymce.js"></script>

(In case it isn't obvious, I added one line containing /* ]]> */ there)

Daniel Martin
The CDATA block is closed on line 781 (lol). Again, site is in development so all the main JS is on the index.
Chris Cooper
You should still properly nest CDATA sections, ie: close it inside that script tag and reopen it in the other.
Kent Fredric
I've broken up the CDATA to two proper sections.
Chris Cooper
A: 

The first thing to try is to turn off all your FireFox addons and see if this fixes it. If it does, you can try to find what addon is triggering this behavior by turning them on one at a time.

Philippe Leybaert
Running FF 3.5 clean install on an XP system still shows the problem.
Chris Cooper
A: 

Use the proper and documented way of lazy loading. Adding things to the body isn't actually lazy loading since it will still block the page from complete rendering until the scripts gets loaded in other words the load event won't fire until it's complete. It's just a way to get the user to see something before all scripts are loaded.

Using this method: http://tinymce.moxiecode.com/examples/example%5F13.php

Will compress and load the contents when you want it to load, in other words real lazy loading. I also get no major performance drawbacks at last on our server it takes 40ms to send the compressed script you guys probably need disk caching enabled.

Also if the page is getting blank you probably need to disable the document.write calls we use for loading scripts synchronous. Use the strict_loading_mode setting for that.

Spocke
A: 

I've had similiar issues of a blank page after init'ing tiny, apparently it's some issue with doc.write. I've found these suggestions helpful:

http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=55236

SeanDowney
A: 

I had this exact same problem. The page loaded fine in Firefox but white screen with visible source in Internet Explorer.

You will not believe what the problem was - in the template, I had put a closing title tag as an </h1>

So the title tag was like this <title>My Website Title</h1> and that caused IE to load a white page, fine in Firefox. I changed it to <title>My Website Title</title> - problem solved!

I found the problem using using the W3C Validator. I doubt this is your same problem but maybe this will help give you an idea of what could cause this response from IE 7.

Matt Earle
A: 

I'm having this exact same issue right now, right down to the mysterious blank page with source code. It's driving me crazy!

I can't really lazy load right now with my set up (loading things in separately with php everywhere) and I'm hoping to find a real fix to the issue.

I'm using tinyMCE, firefox, iMac, and I'm gzipping the tinyMCE with the php gzip.

The entire page fails to load randomly, just like yours.

Has anyone else encountered this issue as well? Have you solved your problem yet Chris?

Jo Martha
A: 

I just had the same problem, a completely blank page with no source output except for IE which was displaying a bare bones document outline. I also have TinyMCE installed and I'm using the Smarty template engine.

I was using the Smarty filter escape:'htmlall', which was converting the TinyMCE enabled textarea submitted content prior to display. As soon as I swapped in a direct PHP call to htmlspecialchars the problem cleared.

I'm guessing the TinyMCE parser fell into a non-terminating recursive loop and the browser bailed out. Even if you aren't using Smarty it might be worth letting unfiltered data through to TinyMCE (in a non-production environment of course!) to see if that helps. If so you can then step up the filtering a little at a time to find out what you can get away with before TinyMCE has a problem.

Danny