Problem with draggable behavior for a huge element inside a small container with Firefox

[Halcyon]

I'm looking for some ideas to use a large (2000x1000) world map inside of a small container (1024 x 768). I set the wrapper as the "bounds" and this worked great in Chrome, but I noticed that Firefox didn't like this and had weird bounds behavior (basically tries to force the map inside the smaller wrapper, but fails). I think Firefox doesn't like that the world map is bigger than something it's supposed to be bound inside of. What I need is sort of like bounds, but not exactly. I need it to disallow dragging the map edges "within" the parent wrapper. That way I can pan all over the map without showing any "dead space" inside of the container. 

 

Any ideas?

[OSUblake]

Demo? I don't see it happening here...

See the Pen 3ee50b0699d18e392d48011c32bf56fc?editors=0010 by osublake (@osublake) on CodePen.

[Halcyon]

I'll give this a try in a codepen tonight and see if I have the same problem. Thanks!

[Halcyon]

Appears to be working fine here. Must be something else in my code causing problems. 

See the Pen qZPgOg?editors=0100 by maelfyn (@maelfyn) on CodePen.

[OSUblake]

Are you using edgeResistance or throwProps?

[Halcyon]

I was, but I turned them off while troubleshooting. I think I figured out what is causing my problem. It's my code that attempts to make the parent container "responsive" for various screen sizes:

e.style.marginTop = (-h / 2) + 'px';
e.style.marginLeft = (-w / 2) + 'px';
TweenMax.set("body", {
  left: "50%",
  top: "50%",
  opacity: 1,
  yPercent: -50,
  xPercent: -50,
  force3D: false
});

 

The yPercent and xPercent were causing my problems in Firefox. Gonna have to dink with this until life is perfect.

[OSUblake]

This pen might help. I made the container responsive using paddingTop. Clicking apply recalculates the layout to the best fit.

See the Pen WbVRrj?editors=0010 by osublake (@osublake) on CodePen.

[Halcyon]

Thanks a lot. You're a saint.