Unclickable labels in draggable on mobile

[annam]

Hello,

 

We've noticed a problem with <label> components inside draggable components on mobile devices - they don't get clicked, so when they are connected to checkboxes or radio inputs using <label for="checkboxid"> the checkbox state does not change.

 

we use the input:checked + label hack to style checkboxes and other elements that have active/inactive state so we need the labels to be functional. I've tried the data-clickable=true attribute and that does fixes the problem, but that renders labels non-draggable and in many cases they take up a lot of space so it's not an acceptable solution for us.

 

check out this jsfiddle: http://jsfiddle.net/annam/NMVmL/ (remember that it needs to be on mobile! on web it works fine)

label "1" is the problematic one.. On web it works ok.. it is draggable if we are dragging, but if you just click on it it changes state.. that's actually perfect because when you drag it detects that it's a drag interaction, not a click one, so state does not change on drag end.

However on mobile this is not what happens.. dragging works but just tapping on the label never changes state.

label "2" and textarea works as expected as dragging is prevented on them, textarea by default and label 2 because of the data-clickable attribute.. label 2 works on mobile and is clickable to change state, but I can't use this because it prevents dragging.

 

As i said this only happens on mobile devices, on desktop this works as expected. so i'm guessing this is some kind of issue? any thoughts?

 

also a suggestion is to make the items that by default prevent dragging an option.. so that user can determine which tags should enable this.. eg to easily add <label> if required.

[annam]

Hi guys,

 

any thoughts on this?

 

Thanks!

Anna

[Jonathan]

Hello annam,

 

I tested your jsfiddle link on a Samsung Galaxy S3 - 4.3 Jelly Bean

 

Google Mobile Chrome:

I was able to click the boxes, and first box on and off like on desktop

 

Android Stock Browser:

I was able to click the boxes, and first box on and off like on desktop

 

So since i was able to click the boxes like on desktop.. maybe something with your device.

• What is the phone you have .. Android, Apple, Windows, or other?
• What version of the OS you using on your phone?
• is your phone Rooted or JailBreaked?
• what mobile browser did you test this on?

It might not be working or is buggy for you on mobile because you have the checkbox  to display none .. why not just make the opacity zero so it is still clickable but not visible, to avoid any cross browser issue on mobile.

 

You could possible also try adding this to your style sheet:

input + label {
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -o-user-select: none;
   user-select: none;
}

That will help so the user doesn't select the text for better usability.

 

The checkbox label hack works in some instances but it is just a hack, and like most css hacks, it won't work cross browser at all or consistently.

[annam]

Hi Jonathan,

 

that's strange.. I've just tested on three devices:

 

iPhone 4S, iOS 7 (not jailbroken): Chrome and Safari

Galaxy S2, Android 4.1.2: Internet browser and Chrome

Nexus 5, Android 4.4.3: Chrome

 

The issue is consistent on all devices and browsers - label 1 is not clickable, label 2 is clickable.

 

It's true that the label hack is buggy on mobile browsers (even though it's completely valid css) but since label 2 works fine I think it's safe to assume that the label hack works on these devices.. The only difference between the working and the non-working label is the data-clickable attribute.

 

I also tried changing display: none to opacity: 0 on the checkbox but the issue persists..

 

Here's the full code of the page I'm testing on, I had to move it off jsfiddle for easier testing:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/utils/Draggable.min.js"></script>

<div id="todrag">
    <input type="checkbox" id="check" />
    <label for="check">1</label>
    <input type="checkbox" id="check2" />
    <label for="check2" data-clickable=true>2</label>
    <textarea></textarea>
</div>



<style>
#todrag { width: 300px; height: 300px; background: #eee; }
input { display: none; }
label { display: inline-block; width: 100px; height: 100px; background: red; }
input:checked + label { background: green; }
textarea { width: 100px; height: 100px; }
</style>

<script type="text/javascript">
Draggable.create('#todrag')
</script>

[Jonathan]

Yeah i was able to click with no problem!

 

Try your example in codepen. Some users have reported issues when testing their code in jsfiddle.

 

Here is your example i made in codepen.. you should find codepen way better than jsfiddle.

 

See the Pen eksBw by jonathan (@jonathan) on CodePen.

 

Just fork my example and test away.

 

Here is the full view to test without an editor:

See the Pen eksBw by jonathan (@jonathan) on CodePen.

 

Also here is a nice video tut by GreenSock on How to create a codepen example demo.

 

See if having your example in codepen helps! Maybe others can test on their mobile devices and see if they see the same mixed results?

[annam]

Hi Jonathan, 

 

as I said I moved the code off jsfiddle to a static html page anyway for easier testing. Nevertheless I just checked the codepen link you sent on the iPhone in both Safari and Chrome and the results were the same - label 1 is unclickable.

 

Actually while testing I noticed that if you click on the first label while the page is still being loaded (before greensock has time to initialize) the label is clickable but once greensock initialises the label becomes unclickable (does not change from red to green and back).

 

Could you please try testing this again?

 

Thanks,
Anna

[Carl]

Hi Jonathan,

 

Thanks for making the CodePen forks.

 

I have to confirm Anna's results.

 

Lablel 1 is not clickable on my iPhone4S iOS6 Safari and latest version of Chrome.

[Jonathan]

Ok testing that codepen link on my device i got mixed results..

 

first box clickable in portrait view on Android Stock Browser but not landscape view

 

first box not clickable in portrait or landscape view on Mobile Chrome

 

weird results...

 

Update:

Also just tested on a Galaxy Tab - 4.3 Android on Stock Browser and Mobile Chrome and got the same results as Galaxy S3  4.3 Android

[Jonathan]

i noticed other people having the same issues with that checkbox input label hack not working or being buggy on Google Android Browsers (stock and chrome):

 

http://css-tricks.com/forums/topic/checkbox-hack-on-mobile-webkit/

 

Others have tried placing the input below the label.. so in the DOM the label is above the input, meaning first.

 

Try looking into that above link/page for a possible workaround!

 

Im sure other Google results will help also:

 

https://www.google.com/#q=css+checkbox+input+label+hack+

 

Sorry i can't be more helpful!

[Carl]

Jonathan, you are plenty helpful!

 

Anna, we have been doing some updates to Draggable and how it handles input elements.

 

I added a pre-release version of Draggable to one of the tests:

http://codepen.io/GreenSock/full/cAnIt

 

Label1 is now clickable on my iPhone.

Please give that a whirl.

 

Jonathan, please give that a run on your droids.

 

I have also attached it to this post so you can test in your project.

 

Please let us know if it works

 

Carl

 

 

Draggable.js.zip

[Jonathan]

Yep Carl.. those updates did the trick.

 

I tested on Galaxy S3 (Android 4.3) and Galaxy Tab (Android 4.3)

 

Both boxes are clickable in both portrait and landscape without any issue.

 

Nice.. clicking is buttery smooth after clicking multiple times like a crazy person

[annam]

Hi Carl,

 

this looks great! I've just tested on the two Androids (Galaxy S2, Android 4.1.2: Internet browser and Nexus 5, Android 4.4.3: Chrome) and it works perfectly on both!

 

Thank you both for your replies and for troubleshooting this issue. Looking forward to the update!

 

Anna

[GreenSock]

This is officially pushed in the latest version of GSAP 1.12.0. Enjoy!

[annam]

Thanks so much! We are already in the testing phase, it looks great and the optimisations are noticeable great job once again!

[Robomagnus]

It appears the label bug is reintroduced after I updated gsap from 1.18.0 to 1.18.2. I'm on desktop using chrome.

[Jonathan]

Hello, Robomagnus, and Welcome to the GreenSock Forum!

• What OS and OS version are you seeing this on?
• What Google Chrome version and build are you see this on?

To get the Google Chrome version and build found on the Google Chrome About Page:

1. Click the Menu icon near the top right corner of the Chrome window (just below the X button that closes the window).
2. In older versions of Chrome, select About Google Chrome in the menu.
3. In newer versions of Chrome, select Help and about, then select About Google Chrome.

Thanks

[Robomagnus]

I'm on OS X El Capitan 10.11.3 and Chrome Version 47.0.2526.111 (64-bit) (I assume the build number is in the version string).

[Carl]

can you please post a simple demo that works in 1.18.0 but not 1.18.2

 

This is a very old thread, but I updated the demo above to use 1.18.2 and it appears to work the same as 1.18.0

 

http://codepen.io/GreenSock/pen/cAnIt

 

thanks!

[Robomagnus]

Oh i see ... 1.18.0 worked without the data-clickable="true" attrib. 1.18.2 requires the use of that attribute. What's the reasoning for this?

[richsykes]

Hi

 

The last codepen (

See the Pen cAnIt by GreenSock (@GreenSock) on CodePen.

), which was updated to 1.18.2 does not work the same as 1.18.0. Nor does it appear to work in 1.18.5.

 

Box 1 (without data-clickable="true") can not be toggled on and off.

Box 2 (with data-clickable="true") can not be used to drag.

 

I really need the checkbox to be clickable and be used to drag.

 

Is my best bet to revert to 1.18.0?

 

Many thanks

[GreenSock]

Safari appears to handle click event dispatching in some non-standard ways that make things very challenging, but I think I've got a workaround in place that causes the upcoming release of Draggable to work well in all the browsers. Please confirm. You can preview the upcoming release (uncompressed) at: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js (Drop that into your codepens and I think you'll see it works well).

[Steve Reedman]

Thanks for looking in to this.

 

That beta works in Chrome, but Box 1 doesn't toggle in Firefox and Edge.

 

See the Pen cAnIt by GreenSock (@GreenSock) on CodePen.

 

Cheers

[GreenSock]

Wow, after countless hours wrestling with browsers, it became painfully obvious that literally every browser handles these click events differently (Chrome, Firefox, Safari, Opera, Android and Microsoft Edge...seriously...**all** of them behaved differently). But fear not - I believe I've concocted a solution that tames them all.

 

Please give this a shot: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Better? I tested it on Chrome, Firefox, Opera, Safari, Microsoft Explorer, Microsoft Edge, on my iPad, Surface tablet, Android tablet, phone...seems to work well on them all now. 

[richsykes]

Sorry for the late reply (I've been away).

 

Sounds like it was a bit of a nightmare, but I've just had a play with this and it's looking good now!

 

Many thanks for your work on it.