Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
MOH

Draggable effected by IOS 7 Hover on Ipad

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,

 

Guys i have a Draggable implemented on a container with the "scrollLeft" feature. On a desktop computer, the container scrolls and the elements inside it are clickable. The thing is each element inside the container has a hover effect, and then when clicked, it gets expanded.

 

I have come up with a problem on an Ipad. The draggable works great and all, but when i click on an element the hover effect takes place, after a research i found out that this is a safari feature by apple to let the hover effect show. I tries the suggested double tap and that did not work. I also tried the .no-touch approach and that did not work as well. For the sake of testing as well, i tries the data-clickable approach too but no,luck as well. when I removed the draggable the elements expanded as expected. 

 

Am i missing something? Please help.

 

MOH

Link to post
Share on other sites

If I recall correctly, I think you can avoid the 'two-touch click' by making sure any :hover classes don't change the visibility or display of their descendants. The feature pretty much exists to support desktop sites with menus that expand on hover. If you don't modify display/visibility with a :hover style, then one touch should properly click the element and show its hover (or focus?) effect.

Link to post
Share on other sites

Does the draggable have any issues with angularjs? I notices that the ng-clcik events are no longer working. As well as all other angular events.

Link to post
Share on other sites

If I recall correctly, I think you can avoid the 'two-touch click' by making sure any :hover classes don't change the visibility or display of their descendants. The feature pretty much exists to support desktop sites with menus that expand on hover. If you don't modify display/visibility with a :hover style, then one touch should properly click the element and show its hover (or focus?) effect.

I know that. This is not the case here for sure, since I am not hiding anything. Because if it was, i would have this issue without the dragger. But when i removed the dragger all is well on the Ipad.

Link to post
Share on other sites

Okay, fair enough. Do you think you could provide a sample page or something so we can see what you are referring to though? We definitely have a preference for codepen and jsfiddle if possible so that we can make changes on the fly. Keep in mind, as far as I am aware we don't have angular js experts here, so if you have to use it to show the problem please keep it simple.

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

×