JW player resets when CSS position changed to fixed in FF/Safari 5.0

Question

Hi,

I have a script that changes a div's positioning property from static to fixed when the scroll bar reaches it. (example - you'll see the floating video in the right column).

If you look at the example, when you scroll down the - the video div ("#membership") scrolls down the page with the rest of the content.

Here's the script that does that:

$(window).scroll(
 function () 
 { 
  if($(window).scrollTop() > 157){
   $("#membership").css("position", "fixed");
   var marginTop = $("#headerWrap").height();
   $("#membership").css("top", "40px");
  }else{
   $("#membership").css("position", "static");
  }
 }
);

Here is the JW player object:

To summarize: When I change the containing div's position property to position: fixed, the JW player resets. I have no clue how to even attempt to debug this. It works fine in Chrome for OSX/Windows and interestingly enough Safari 3.

One observation that may or may not help - the whole video blinks and appears to reload when the position property is changed.

Answer 1

When you change the position property for a static element, the browser has to reflow the page. When this happens, it may or may not decide to reload embedded objects. Try starting with position absolute rather than static and see if that makes a difference.

Answer 2

I would try putting embedded object into iframe... providing this doesn't create too much fuss in your JS code.

Answer 3

As far as I now this is a bug in FireFox: https://bugzilla.mozilla.org/show_bug.cgi?id=90268