jquery iframe css firefox bug?

Question

Without going in to detail on what these methods do, can anyone tell me why I get these weird results?

getCurrentIframe().findInIframe("h2").css("paddingLeft") // gives me "20px"

how ever if I do .get(0) or [0] to get the dom-element and then rewrap it in a $ I get:

$( getCurrentIframe().findInIframe("h2")[0]).css("paddingLeft") //it gives me "0px"

When I do an .each, $(this).css("paddingLeft") (within the each loop) also gives me 0px.

Im also getting different results on paddingLeft when I use this(from the parent window): iframe.contentWindow.$(selector).css("paddingLeft") //gives me 20px but iframe.contents().find(selector).css("paddingLeft") //gives me 0px

It seems that firefox is uncapable to find the correct css in iframes on an element unless it has the styles set inline. (like for example: if body has font-size:18 in css, but the elements css has font-size:40px, it will return 18px)

boggled

added:

  getCurrentIframe().findInIframe("h2").each(function() { console.log($(this).css("paddingLeft")) }).css("paddingLeft")

this prints out in firefox 0px 20px. How ever in chrome it prints out 20px 20px

Answer 1

Two things. First, inline CSS styles are probably working better due to a timing issue with regards to the external CSS not being available when your script runs.

Second, iframe.contentWindow.$(selector) is weird I wouldn't expect it to get the same result. I would bet that the .$() call is acting just like a call to $()-- by that I mean it would be selecting from all things on the page, not limited to the content window.