Stan2122

SVG drag lagging in Chrome

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

 

Share this post


Link to post
Share on other sites

Hi Stanley. I'll need a little time to look into this. It appears to be a nested transform matrix issue. Is there some reason you need to organize things this way and have JavaScript do all that re-jiggering work rather than just having CSS fit it to the window, like with position:fixed? 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hi Jack,

 

I just tested it on Windows Chrome, IE, and Edge, all have the same problem. Windows Firefox is okay.

 

Stanley

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thanks Jack! The updated Draggable js file fixed the problem in Chrome and IE/Edge. Thanks a lot for the quick response!

 

  • Like 1

Share this post


Link to post
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.