Jump to content
GreenSock

Pilatus

Draggable SVG not staying within bounds on IE11

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

Hello,

 

I created an example on codepen to demonstrate the problem.

Basically the SVG does not obey the bounding rule.

 

Any idea? it works on Chrome.

Draggable.create("#svgId", {
  throwProps:true,
  bounds: window
});

I don't want to enclose the svg inside a div and rather drag the div because I need specific svg click pass-through features which the divs do not allow. Dragging an enclosing div would be a workaround I could not use.

See the Pen BNoXEz by anon (@anon) on CodePen

Link to comment
Share on other sites

I've tested on Chrome, Opera, IE11, and Firefox and it only works in Chrome and Opera but I found if I wrapped the svg in a div which I give the same dimensions in css it works!!!

I just went back and read your post so if I can't wrap in a div I'll have to sleep on it.....hummmmm

  • Like 1
Link to comment
Share on other sites

This has to do with yet another inconsistency in how various browsers report things related to SVGs. Fun! Don't worry, though - I've got a fix in place for the next release which is due out soon. If you want an advanced preview copy, let me know. 

  • Like 3
Link to comment
Share on other sites

Depends on the frequency of the releases.

Yes if I could have the fix right away it'd be nice.

Link to comment
Share on other sites

It's not quite ready yet, but I'll ping you when I have something to test. I want to check a few more things first. 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

I haven't forgotten you - it's just that there are some really weird behaviors related to SVG elements in various browsers, so it's taking a while to iron out a fix that works across all the browsers. Thanks for your patience. This is a top priority right now and I've been devoting many, many hours to this. I'll get back to you as soon as I've got something ready.

  • Like 1
Link to comment
Share on other sites

Sorry about the delay. You wouldn't believe how many browser inconsistencies there are related to SVGs. I have spent an obscene amount of time tracking them down and trying to work around them. I have no hair left :)

 

I've finally had some good success. Would you mind taking a peek at a preview of the upcoming release of Draggable? https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js (uncompressed). Please let me know if that works well for you. If you want to pair it with the upcoming TweenMax, that URL is: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js. 

  • Like 2
Link to comment
Share on other sites

I quickly tested it and the border functionality seems to work as advertised.

 

Also, when testing on IE10 I spotted an error in the debugger, you can see it in the attachment. Normally I operate on IE10 and IE11.

 

I noticed the behaviour of my resize draggable changed, need more time to understand it, maybe it's my fault, thing is, with the old version it was ok ;( (maybe current beta still unstable?). But this is unrelated with bordering.

 

But yes, again the bordering works.

post-36265-0-30850900-1432645939_thumb.png

Link to comment
Share on other sites

I am still trying to figure out why my resize box is more "sensible" to mouse movement with the beta version.

 

You can see the difference here:

 

1-

See the Pen KpNXJg by anon (@anon) on CodePen

(old version)

2-

See the Pen jPVGRr by anon (@anon) on CodePen

(same code, beta version)

 

As you can see in case 2- it way more sensitive to the mouse movement.

 

This is an example, but using a div:

 

See the Pen OVbxxG by anon (@anon) on CodePen

(old version)

Link to comment
Share on other sites

Hi marzullo63  :)

 

pls check this out : 

See the Pen QbGOpp by MAW (@MAW) on CodePen

 

with new js files works correctly in all modern browsers without any error .

  • Like 4
Link to comment
Share on other sites

Ah yes, this is actually an example of one of the fixes in Draggable, and it was exposing a flaw in the way you were doing your drag/resize logic. 

  1. You were trying to affect "top" and "left" properties of an SVG element, but SVG element's don't really have those. They do, however, have transforms which is why Diaco was correctly advising you to use type:"x,y". 
  2. You had an SVG that was natively built at 548x723 but you were squishing it into a 150x150 space, thus it was scaled down. The reason the mouse movements felt so much "more sensitive" was because the new Draggable was correctly calculating the scale so that for every 1 pixel you were moving in the global coordinate space (with your mouse), it was the same as moving it about 4.8 pixels in the SVG's local coordinate space. You were piggy-backing off of those values to do your resizing, thus things were resizing much faster. 

Does that clear things up? 

 

Oh, and I believe I fixed that borderLeftWidth error thing you mentioned.

  • Like 3
Link to comment
Share on other sites

Hello guys,

 

Altough your examples did not apply directly to my work, they helped figuring out the viewbox attribute was getting on my way so I changed my solution without using it and resizing my paths with a .set call. Also I changed from top,left approach to x,y as suggested and reworked all my algos.

 

Now I've got it done and WITH border control.  8-)

Also, borderLeftWidth  issue is gone.

 

Thanks!

  • Like 1
Link to comment
Share on other sites

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