Jump to content
Search Community

SVG drag lagging in Chrome

Stan2122 test
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

Hi,

 

When SVG is resided within two <div>, first one with position relative, the second with position absolute, the SVG drag object lags behind the cursor when the outer <div> is scaled bigger to fit the window. See the sample in CodePen. If the div is scaled smaller, the SVG drag object moves faster than the cursor. This problem exists in Mac Chrome, no such issue in Mac Safari or Firefox, not sure the same problem exist in Windows Chrome, IE, and Edge.

 

To test the above, please open up the window display area much bigger or much smaller than 800 x 600.

 

Thanks,

Stanley

 

See the Pen jdxxgz by GTStan (@GTStan) on CodePen

Link to comment
Share on other sites

Hi Jack,

 

What I have here is just a simplified version of what we are having in our project. The SVG can be nested even deeper in run time. 

I don't know how the "position: fixed" has anything to do with this problem, one thing we know is that it is not suitable for our project because all the positioning of object need to be relative to its parent, with position:fixed the positioning is relative to the document.

 

Stanley

Link to comment
Share on other sites

I believe I found (and fixed) the problem. It'd only happen on an SVG element that's nested inside a transformed element that's further outside of its offsetParent. Please try this updated (uncompressed) version of the upcoming release and let me know if it works well for you: 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Thanks for reporting the issue and for providing such a great reduced case in codepen. That was super helpful!

  • Like 2
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.
×
×
  • Create New...