jQuery/Firefox Bug

Dec 13, 2007 by Matt | Posted in Coding 13 Comments

When I was developing the NTugo webtop, I did a bit of work with jQuery and noticed an odd bug. Using the show() and hide() functions on divs, there is one instance where the body’s background image is disrupted by the animation. It only occurs in Firefox, and only with one div. Here’s a YouTube video I captured to illustrate the phenomenon:

Odd, isn’t it? Is anyone else having this bug? I haven’t succeeded in locating the source of the problem, or the reason why it only affects the one div. It’s not a big problem (in my case), but I’d like to learn more about this all the same. Here’s the URL for my personal webtop, so you can see the effect live.

I was just wondering if anyone else has seen something like this before.

  • http://www.blogsolid.com Imar

    Cool video, what do you use for the capturing?

  • http://www.webmaster-source.com Matt
  • http://shaver.off.net/diary/ Mike Shaver

    Hey Matt,

    That is indeed a pretty strange bug (the background shudder manifests differently for me with a recent Firefox 3 beta, but is there) — do you suppose you could reduce that test case down and file a bug in our bug system? https://bugzilla.mozilla.org/ is the place.

    #qa on irc.mozilla.org has helpful folks if you run into trouble with the process, or you can email me.

    Thanks!

    Mike

  • http://www.webmaster-source.com Matt

    Well, it may take awhile for me to get around to it, but I’ll probably take your suggestion.

  • http://www.webdevelopment2.com Baz L

    Yes sir,

    I’ve seen it. It annoyed me a lot, until I just gave up and was satisfied with the fact that (for that particular application) the majority of users are on IE.

    —
    Baz L

  • http://www.webmaster-source.com Matt

    I wonder why it only affects the one div. I don’t see anything that could cause it to only affect that one.

  • Chris

    Hey there..quite a bit late on a response to you, but I am seeing a similar effect. On my page, I have a left-side nav menu. Using Jquery, the nav links put content from external files into a content area in the middle. On a couple of the links, the background image suddenly disappears. click on one of the others, and it is back. Very strange indeed…Functions perfectly fine in Safari…

  • http://www.webmaster-source.com Matt

    Interestingly it doesn’t seem to happen with Firefox on the Mac. It’s rather odd.

  • http://www.raxas.net raxas

    i have the same problem using jquery / kwics and its afect only one div on firefox either mac or pc. :S

    • http://intensedebate.com/people/redwall_hp redwall_hp

      It doesn't do it for me on the Mac side in Firefox. I haven't checked with the Windows version in awhile. I've wondered if it might have been fixed in a newer version of jQuery…

    • http://www.intensedebate.com/people/redwall_hp redwall_hp

      It doesn't do it for me on the Mac side in Firefox. I haven't checked with the Windows version in awhile. I've wondered if it might have been fixed in a newer version of jQuery or Firefox…

  • http://www.tobiasartz.nl Tobias

    I got the exact same thing!
    Think it has got something to do with rendering.
    It only happend when the DIV moves over a PNG or JPG right?
    Check tobiasartz.nl it has the same issue

    • http://www.webmaster-source.com Matt

      Yes, when it’s over a PNG or JPG… Interestingly, it doesn’t happen on the Mac version of Firefox.