I have a very basic html element that I would like to fadeIn(). I am however using require.js so I believe this could be part of the problem. I am using jQuery 2.0.3 When using fadeIn I get this error:

SecurityError: The operation is insecure.
chrome://firebug/content/console/mandLineExposed.js
Line 5

I have never seen this before, I have reset firefox and my PC.

Html

 <message-box>
      <message-info></message-info>
      <close-box>x</close-box>
 </message-box>

JS

$('message-Box').fadeIn(); 

I only get this error with firefox v27. No other browsers are having this problem, but I haven't tested it in any older versions of FF

I am not seeking help for anything other than the error...

See the error in action? and run this mand: SD.message.showMessage('Somehow this breaks everything', 'bad');

-----Edit-------

So sadly you'll need to test this Here I assure you this is SFW, its just the sign in page.

I am confident there must be something in my other JS files that is conflicting, but I, as yet, have not found the problem.

I removed a fiddle that was here as it in no way helped the question, since adding the bounty I want it to be as helpful as possible.

Second Edit

Oddly, when running any show(), hide(), fadeIn() etc an iframe is created at the base of the page, just before the body. I'll need to have a think in my code why this would be happening.

Third Edit

I have no reason or explanation for this, but updating to jQuery 2.1.0 has fixed my issues. If anybody can explain the problem then I'd love to give them the points :)

I have a very basic html element that I would like to fadeIn(). I am however using require.js so I believe this could be part of the problem. I am using jQuery 2.0.3 When using fadeIn I get this error:

SecurityError: The operation is insecure.
chrome://firebug/content/console/mandLineExposed.js
Line 5

I have never seen this before, I have reset firefox and my PC.

Html

 <message-box>
      <message-info></message-info>
      <close-box>x</close-box>
 </message-box>

JS

$('message-Box').fadeIn(); 

I only get this error with firefox v27. No other browsers are having this problem, but I haven't tested it in any older versions of FF

I am not seeking help for anything other than the error...

See the error in action? and run this mand: SD.message.showMessage('Somehow this breaks everything', 'bad');

-----Edit-------

So sadly you'll need to test this Here I assure you this is SFW, its just the sign in page.

I am confident there must be something in my other JS files that is conflicting, but I, as yet, have not found the problem.

I removed a fiddle that was here as it in no way helped the question, since adding the bounty I want it to be as helpful as possible.

Second Edit

Oddly, when running any show(), hide(), fadeIn() etc an iframe is created at the base of the page, just before the body. I'll need to have a think in my code why this would be happening.

Third Edit

I have no reason or explanation for this, but updating to jQuery 2.1.0 has fixed my issues. If anybody can explain the problem then I'd love to give them the points :)

• javascript
• jquery
• html
• firefox

• 2 This is not valid html. – enapupe Commented Feb 10, 2014 at 0:09
• 2 Of course it is, its html5 my friend. When did you last read the spec :p w3c.github.io/webponents/spec/custom and shame on the person who upvoted it. – Jamie Hutber Commented Feb 10, 2014 at 9:19
• Adding height:100% to messageBox seems to work. jsfiddle/9Frn8/5 – enapupe Commented Feb 10, 2014 at 18:50
• dev.sencha./deploy/ext-1.1.1/docs/output/Ext.MessageBox.html thought this might help you – Viswanath Polaki Commented Feb 15, 2014 at 17:29

3 Answers 3

Stepping through the jQuery code, you eventually hit this internal function below. The security error is thrown when jQuery attempts to write to the iframe document. jQuery 2.1.0 has a different way of determining the default node display value so you can just treat this as a jQuery/browser bo bug. You can minimally recreate the security error by pasting the following into the console:

var iframe = jQuery("<iframe frameborder='0' width='0' height='0'/>").css( "cssText", "display:block !important" ).appendTo(document.documentElement);
iframe[0].contentWindow.document.write("<!doctype html><html><body>");

Internal jQuery function:

function css_defaultDisplay( nodeName ) {
    var doc = document,
        display = elemdisplay[ nodeName ];

    if ( !display ) {
        display = actualDisplay( nodeName, doc );

        // If the simple way fails, read from inside an iframe
        if ( display === "none" || !display ) {
            // Use the already-created iframe if possible
            iframe = ( iframe ||
                jQuery("<iframe frameborder='0' width='0' height='0'/>")
                .css( "cssText", "display:block !important" )
            ).appendTo( doc.documentElement );

            // Always write a new HTML skeleton so Webkit and Firefox don't choke on reuse
            doc = ( iframe[0].contentWindow || iframe[0].contentDocument ).document;
            doc.write("<!doctype html><html><body>");
            doc.close();

            display = actualDisplay( nodeName, doc );
            iframe.detach();
        }

        // Store the correct default display
        elemdisplay[ nodeName ] = display;
    }

    return display;
}

As per specification custom elements shall have '-' in their tags, so your markup should look like this:

<message-box>
  <x-message><div></div></x-message>
  <x-close>x</x-close>
</message-box>

After the change and corresponding style updates it works as far as I can tell: http://jsfiddle/9Frn8/11/

Looks like this may be due to the absolute paths in your CSS file. I also see (in console) you are trying to do a call to localhost (which fails, of course). There seems to be some issues in your code that is causing Firefox to stop specific processes. Specifically, something that firefox considers cross-domain.

This is most likely a Same-Origin-Policy issue.