icheck
icheck copied to clipboard
drgullin
iCheck 1.0.2 no touch on Windows 10/Chrome 55
Seems that iCheck does not detect touch correctly on Windows 10 with Chrome 55 using a Windows Tablet. Works fine on a PC and works fine with Edge. Works fine on the same tablet using the keyboard/touchpad.
It does not generate any javascript errors in the Chrome developer console.
And, the demo site icheck.fronteed.com also shows the same behavior. So, I don;t think it's me...
Any idea how to debug/fix?
I wonder if this issue is similar to the issue I'm getting. When using touch devices (chrome emulation or Surface tablet) you need to click above the label or checkbox in order to select the checkbox/radio control. You can't click directly on the control in order to select it. I'd love know if anyone else is having this issue. @precisionpete does clicking slightly above your control select it? Like you I can reproduce this issue using Chrome dev tools with touch devices on icheck.fronteed.com
No @NewJenk I didn't, I ended up removing iCheck and using a CSS only solution which isn't as shiny and has browser variances but at least it's usable.
This still doesn't work for Chrome on the Surface tablet, and probably any touch event. It doesn't seem to be registering the events at all.
It's tough to diagnose without a way to hook the tablet to my local dev environment but I can try debugging in the console today.
Thanks for the fix @jm-plagnard.
Have you figured out if it's possible to only listen for a tap? As I've noticed if I move/scroll the page whilst on a checkbox/radio it triggers.
No... I didn't notice that the scroll would trigger it as well but you're right it does. The only solution I see would be to check the position (pageX, pageY) when the touchend event is fired and see if it is same position as the checkbox. But maybe should use the touchstart event instead so it will check the box immediately.
Sometimes on certain touchscreens icheck doesn't trigger the "touschstart" event. I developed a jquery fix that triggers click event on the "ins" element. On iradio works fine everywhere, but on icheck i had delay it in order to notice if it has been already checked/unchecked on normal touchscreens, otherwise it would be clicked twice. I set a 100ms timeout and I think that's enough to work correctly and you won't notice it.
$('[class*=iradio_] ins.iCheck-helper').on({ 'touchstart' : function(){
$(this).click();
}
});
$('[class*=icheckbox_] ins.iCheck-helper').on({ 'touchstart' : function(){
var ins = $(this);
if($(ins).parent().hasClass('checked')){
setTimeout(function(){
if($(ins).parent().hasClass('checked')){
$(ins).click();
}
}, 100);
} else {
setTimeout(function(){
if(!$(ins).parent().hasClass('checked')){
$(ins).click();
}
}, 100);
}
}
});
Hello, i just changed: _touchend = 'touchend', with _touchend = 'touchstart',
and it works!
I have a fix for it and will be happy to share on 1.x
This "fix" breaks the icheck controls and probably the iradio controls as well on iOS 12. After applying this it, the icheck controls only work sporadically when tapped (like 1-2 out of 10 times).
In order to fix the issues on ios, you just need to add event.preventDefault(); below operate(self, false, true); on line 205 and 272 in the @jm-plagnard fork. It will fix the issue of duplicate triggers on some devices (click & touchend). I also suggest to add parent_remove; to line 460 in order to fix a small visual issue on ios. After these changes it works great and can probably be used in production (if you want to put the work in that comes with using an abandoned project).
I am able to fix this using pointer event api basically it appears in surface tablet or window touch device here is code snippet work for me
function getMobileOperatingSystem() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
// Windows Phone must come first because its UA also contains "Android"
if (/windows phone/i.test(userAgent)) {
return "Windows";
}
if (/android/i.test(userAgent)) {
return "Android";
}
// iOS detection from: http://stackoverflow.com/a/9039885/177710
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
return "iOS";
}
return "unknown";
}
function detectInputType(event) {
if(event.pointerType=='touch'){
if($(event.target).is('.iCheck-helper')){
$(event.target).trigger('click');
}
}
}
var operating_system=getMobileOperatingSystem();
if (window.PointerEvent && operating_system=='unknown') {
window.addEventListener("pointerdown", detectInputType);
}
