fancybox sliding motion glitchy/jerky

Problem

Here is the website --> http://giantsofafrica.org/camps/top-50-camp/

Whenever I use fancybox on this site, there is this weird, jerky, sliding motion. If you scroll down and click on one of the players, the popout will appear. Click on the right or left arrow and you'll see what I mean. The sliding is not smooth.

Here is an animated GIF of the effect --> http://www.screencast.com/t/KDLvaXIgM

I've looked through the CSS for anything unusual, but can't spot anything. I am finding this really awkward to debug, frankly. It would be great if someone, with their answer, explained how they were able to debug this.

Thanks.

Problem courtesy of: Mr. Loop

Solution

Fancybox calculates dynamically the position and margins of the .fancybox-wrap container based on the API settings and the content dimensions, which, as example, can result in something like this :

element.style {
  height: auto;
  left: 279px;
  opacity: 1;
  overflow: visible;
  position: absolute;
  top: 28px;
  width: 808px;
}

... however, you have these css rules (lines 1768 and 2381) in your screen.css file :

.fancybox-opened {
  top: 10px !important;
}

... so the fancybox wrapper jumps from the original top: 28px; (as above) to top: 10px; after show.

Notice that the fancybox main wrapper has both classes : .fancybox-wrap and .fancybox-opened

It would be great if someone, with their answer, explained how they were able to debug this.

Use Firebug to track inherited css styles and layout of the fancybox elements. Anyways, always be careful when modifying selectors of a plugin via css to avoid unexpected results.

Solution courtesy of: JFK

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.