Draggable Knob Spin problem in Chrome

[gmgurgen]

Hello,

I' ve a problem with drabble knob in chrome, but i could not reproduce it on codepen.
http://phoenix.yenileniyor.com/discipline-serisi

In this page, the circle with arrow part of the spider is the knob. When you turn this cases will come on right side. It works fine on ff but on chrome, when you start dragging, it's very hard to turn it and when the arrow looks down, dragging start to behave reverse, when i pull the mouse up left it goes right.
It behaves as just on right - up- down and left, not diagonal directions.
What can be the problem in there?
I tried to reproduce it on codepen, but no luck.

Thanks in advance,

Hope, we can get a solution.

See the Pen RQVGyY by gmgurgen (@gmgurgen) on CodePen

[PointC]

Hi @gmgurgen

 

Welcome to the forum.

 

I'm not quite sure what's happening there, but I do see the behavior that you mentioned in Chrome. (I'm also seeing the odd behavior in Edge). Strangely, your CodePen demo works perfectly in all browsers. Since that is the case, there has to be something different between the demo and your live site. Have you tried stripping down the live site to the same level as the demo and adding things back until that odd behavior occurs? Just a thought.

 

I don't really have any other answers as it's hard to debug a live site. Maybe someone else sees something that I'm missing.

 

Happy tweening.

 

[gmgurgen]

Actually on live site, there is more animation. For example SplitText. But in codepen, i can't find a link to embed SplitText.min.js so i tried to embed from my ftp, but no luck again :/ There is also a babel animation too.
I didn't try to strip down completely but i tried eliminate other animations one by one, but no change. I will try strip down completely like demo and add like you said.
Will inform you in a couple mins.

Thanks

[gmgurgen]

I just realised, in codepen it's all the same with my live site. Babel and etc all there. :/ But strangely, throwprops not working like splittext.

[gmgurgen]

I figured out that, the problem occurs when the knobBG is scaled as width: 30%;.

when i edit it as 100%; it is working again. But; i need it smaller how can i achieve this :/

 

[gmgurgen]

Also if i edit it as 100% width it seems working but if i scale down or up the browser window, it messes up again.
Isn't this animation responsive on chrome? I think that's the real problem.

[GreenSock]

I can't quite understand what you're saying is broken. Can you please provide the most reduced test case possible in codepen and explain what SHOULD happen (but isn't)? I scaled the window up and down in Chrome and from what I could tell, things worked fine but I'm probably just missing something obvious. Again, the simpler the better

[gmgurgen]

Hi Jack
I couldn't reproduce it in codepen, strangely.

http://phoenix.yenileniyor.com/discipline-serisi

In this page, it's all the same with codepen, except it has some containers because of theme.
Turning the knob is very hard. when it's turned 180deg and the orange arrow looks down, it's rotation becomes like reverse when i start dragging the knob.
Mouse goes right but knob goes left or the other way. I took a video to be able to explain better. See;
http://take.ms/ZMBAZ

It's like when it is in 30% width, it's bounds are not get smaller with knob itself.You will get it when you try the live site on chrome.

[GreenSock]

There are just too many variables and too much code to effectively troubleshoot your live site. We really need a reduced test case in something like codepen. If you can't reproduce it there, it seems like you must have something else interfering on the live site (a different library? Some rogue code that affects the transform-origin? Not sure). I wish I had time to do custom troubleshooting on live sites like this; perhaps someone else does. 

[PointC]

I don't think there's any question that something odd is happening on the live site.

 

As Jack mentioned, since it works fine on CodePen there has to be something else interfering. This doesn't appear to be any problem with GSAP. It does seem like some sort of sizing or transform-origin issue. I tried looking at your live site, but there are just too many scripts loading and without editable code, its so difficult to debug. I'd recommend starting with the code from the demo and just keep adding scripts, styles and functionality until the behavior appears. 

 

If you could make it happen in a simplified CodePen, we should be able to point you in the right direction.

 

Happy bug hunting.