0

Not sure about posting code since it's NDA'd, so I can't even show the current dev site as it's still under development, but essentially what's going on is that removeClass() is not working until the next click. So let's say there's a click event, where if you click a previous unselected item, it does addClass("active"), and if you click it again it does removeClass("active").

Problem is, while the addClass() effects are immediately apparent (background color changes), the removeClass() effects (revert background color) do not occur until you click on the screen somewhere, anywhere, but only in Chrome and Firefox. In IE the behavior is exactly as it should be.

The click event is bound with 

$(".relevantItems").bind("click", function(){ 
    if ($(this).hasClass("active")){
        $(this).removeClass("active");
    } else{
        $(this).addClass("active");
    }
});

So it's pretty straightforward. There must be something on the page that is causing this weird behavior, but I have no idea what it could be, as there's no other events that are bound to the relevant items. Any idea what I should be looking for that might be causing this behavior?

EDIT - It seems this is only doing this on my Surface Pro 3 (Chrome and Firefox are not in App Mode, whereas IE is. I'll pop Chrome to app mode and see what happens... but either way this is still a problem).

EDIT 2 - Confirmed working on all desktops and laptops in the office, except on Chrome and Firefox on the Surface Pro 3, even in native app mode. Anyone know what the tag for the surface is, as this seems to be device specific? Notably I have a hunch my switching Chrome and Firefox into the default app mode browser earlier may have caused a surface bug that is causing this, because when I switched them out of native app mode I couldn't even type in either browser. Working on iPad as well.

EDIT 3 - Figured it out, sort of. It's the touchscreen behavior. If I use the touchpad on the Surface to click on the elements, everything works as expected. But this touchscreen problem doesn't occur on the iPhone or iPad. Not sure what's going on with that.

EDIT 4 - Reproduced it on another Windows 8.1 laptop that has touch. So this is a Windows 8.1 only problem it seems, specific to Chrome and Firefox within that, and only when you touchscreen the buttons. Odd..

章 哲
  • 91
  • 5
  • I appreciate you say it's NDA'd, but there's currently not enough code shown for us to be able to help. The code, as you have shown it, should indeed toggle the class on each click. – Mitya Apr 16 '15 at 22:34
  • 6
    First of all replace all of this by `$(this).toggleClass("active");` – floribon Apr 16 '15 at 22:34
  • How simple a sample can you reproduce it with? If you can reproduce it with a single div, a single CSS class, and just that function, then you can make a fiddle to show the problem. If you can't, then perhaps the issue is one of the points of complexity outside the description given. – Adrian Apr 16 '15 at 22:36
  • Yea it might be outside of the description given, there must be conflicting binds somewhere. Would a conflicting bind be able to produce such a behavior? – 章 哲 Apr 16 '15 at 22:50

2 Answers2

0

Figured it out. Had to add mobile jQuery and add the "tap" event. Apparently for Windows 8.1 on a touchscreen weird things can happen if you have "click" only.

章 哲
  • 91
  • 5
0

Given your description the best I can do is offer you a hack that will hopefully have the desired effect. What we should try is forcing the browser to re-render the element after we have changed the class. Try the following code:

$('.relevantItems').on('click', function(){ 
    $(this).toggleClass('active');
    this.offsetHeight;
});

For more details about the solution click here.

Community
  • 1
  • 1
iMoses
  • 4,338
  • 1
  • 24
  • 39