Jump to content
Search Community

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

Halcyon
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Posted

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?

Posted

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

Posted

Are you using edgeResistance or throwProps?

  • Like 1
Posted

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.
Posted

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.

  • Like 3
Posted

Thanks a lot. You're a saint.

  • Like 1

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...