CODEWITHSUNDEEP
javascriptfirefoxtinymce
Christopher Cooper
Christopher Cooper

Reputation: 1920

Page Entirely Blank Despite Having Source Code! (TinyMCE, FireFox)

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.

Upvotes: 3

Views: 15277

Answers (12)

Murat Colyaran
Murat Colyaran

Reputation: 2189

None of the solutions above worked on my case. I had to use a additional page refresh to load editor.

<script type="text/javascript">

    (function() {
        if (window.localStorage) {
            if (!localStorage.getItem('firstLoad')) {
                localStorage['firstLoad'] = true;
                window.location.reload();
            } else
                localStorage.removeItem('firstLoad');
        }
    })();

   tinymce.init({
   ...
</script>

Upvotes: 0

Sanjeev Kumar
Sanjeev Kumar

Reputation: 1

I faced the same issue and found one style tag on the page was not closed. Neither browser was showing the error nor any error was at the server console. When I close the style tag, the page start getting visible. Check you page. It was an html error.

Upvotes: 0

Danny
Danny

Reputation: 11

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.

Upvotes: 1

user198103
user198103

Reputation:

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.

Upvotes: 0

SeanDowney
SeanDowney

Reputation: 17764

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

Upvotes: 0

Spocke
Spocke

Reputation: 149

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_13.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.

Upvotes: 0

Kent Fredric
Kent Fredric

Reputation: 57374

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.

Upvotes: 2

Philippe Leybaert
Philippe Leybaert

Reputation: 171864

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.

Upvotes: 0

Daniel Martin
Daniel Martin

Reputation: 23558

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">',
        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">',
    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)

Upvotes: 0

stef
stef

Reputation:

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.

Upvotes: 0

peirix
peirix

Reputation: 37771

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...

Upvotes: 0

Fenton
Fenton

Reputation: 251172

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.

Upvotes: 0

Related Questions