Jump to content
Search Community

Black box when initiating rotation of dial with touch

Lars Ejaas test
Moderator Tag

Recommended Posts

Hi

First of all: I am SO impressed with GSAP 3 - it's just SO impressive and intuitive to work with: thanks!
 

I have implemented GSAP 3 and the draggable plugin in a browser extension I am working on, that includes  a Jog Dial.

However, I am having an issue, where I get a square-shaped box on top of the dial when i rotate it on my win 10 touch screen.  I get no issues when I rotate it with the mouse, but when I use my finger on the touch-screen I get a transparent gray overlay when I press the dial.

 

I am thinking that this is some sort of CSS issue (and hopefully an easy fix). I have the newest GSAP 3 + draggable min. files included in the extension.

 

I cannot replicate the issue on codepen - but I got a LOT of CSS going on in my extension, so it is really hard for me to find the origin of the issue.

I made a small GIF of the issue here: https://i.imgur.com/PU93y7z.gifv

I hate to ask about something that probably is just a "quick" fix - but I am a bit stuck debugging this - anyone seen anything similar?

See the Pen zYGPjMR by lars-ejaas (@lars-ejaas) on CodePen

Link to comment
Share on other sites

Hey Lars. Thanks for the kind words!

 

23 hours ago, Lars Ejaas said:

I am having an issue, where I get a square-shaped box on top of the dial when i rotate it on my win 10 touch screen.  I get no issues when I rotate it with the mouse, but when I use my finger on the touch-screen I get a transparent gray overlay when I press the dial.

Does this occur in every browser? What browser are you using?

 

Maybe you could play around with -webkit-tap-highlight-color to try to get rid of it? Are you applying any styles similar to what you're seeing (at all that could be related via a parent element or something) on :hover?

  • Like 2
Link to comment
Share on other sites

43 minutes ago, ZachSaucier said:

Hey Lars. Thanks for the kind words!

 

Does this occur in every browser? What browser are you using?

 

Maybe you could play around with -webkit-tap-highlight-color to try to get rid of it? Are you applying any styles similar to what you're seeing (at all that could be related via a parent element or something) on :hover?

Thanks a lot ZachSaucier!

-webkit-tap-highlight-color: transparent did the trick!

You truly are a magician: That would honestly have taken me literally forever to debug!


 

  • Like 3
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...