905860 - Kohls ad drag to reveal doesn't work

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Dave Miller [:justdave]]

right now. Kohls is running an ad on their in-store Wi-Fi (conveniently the url is accessible from outside their network) where you emulate one of those scratch to reveal your savings ads by dragging your finger around on the screen to scratch the silver finish off. this works fine in the built-in Android browser, but does absolutely nothing in Fennec.

http://mobile.cloud.kohls.resource.com/wifi/offers.php

could be something browser-specific they're doing, but I thought it would be worth having the real experts check first.

Comment 1

[Dave Miller [:justdave]]

26.0a1
(2013-08-15)

Comment 2

[Kevin Brosnan [Ex-Mozilla]]

Sounds like a website issue to investigate.

Comment 3

[Karl Dubost💡 :karlcow]

Attachment: screenshots for the ads

I can't reproduce. See kohlsads.png
I tried also on Opera Mobile, on iPod Touch + Safari, AND on the stock android browser without having any issues, or the scenario explained.

If it is not reproducible, I'm inclined to close it as INVALID or WORKSFORME.

Comment 4

[Kevin Brosnan [Ex-Mozilla]]

Site content has changed there was a carousel these sorts of promotions should end in a few days/week. The carousel may come back once the current promotion ends.

Comment 5

[Karl Dubost💡 :karlcow]

Closing with WORKSFORME. 
We can reopen if it's happening again.
Thanks Kevin, Dave for the report.

Comment 6

[Dave Miller [:justdave]]

This ad is back on the rotation again

http://m.kohls.com/wifi/wifi.html?source=welcome

Comment 7

[Dave Miller [:justdave]]

Attachment: Screenshot of the broken ad

Comment 8

[Aaron Train [:aaronmt]]

Probably an event issue. Here are the events on the target canvas on the page: click, mousedown, mouseup, mousemove, touchcancel, touchend, touchmove, touchstart, transitionend, webkittransitionend

http://m.kohls.com/wifi/media/js/jquery/jquery-2.0.3.min.js

I've CC'ed web-compat.

Comment 9

[Mike Taylor [:miketaylr]]

They're using a jQuery plugin, wScratchPad (I see an issue for Fennec at https://github.com/websanova/wScratchPad/issues/6)

I threw their demo up at https://miketaylr.com/bzla/wscratchpad.html, totally not working in Firefox for Android, but I'm not sure if it's failing on touch events or mouse events.

Comment 10

[Wesley Johnston (:wesj)]

I think this is just another site that depends on a non-existent global event object:

https://github.com/websanova/wScratchPad/blob/master/wScratchPad.js#L166

Comment 11

[Mike Taylor [:miketaylr]]

Actually, missed "ReferenceError: event is not defined" when trying to swipe on the original ad, and on the jQuery plugin demo.

After passing in an explicit "event" object argument argument in [1], the next error is that "touches" in undefined (on line 168) of [1]. jQuery clobbers event objects but copies over the original event to event.originalEvent -- so after passing in an "event" object argument and changing line 168 to:

var touches = event.changedTouches || event.originalEvent.changedTouches, ...

The demo works as expected.

So the question is, whose bug is this? How does Chrome/WebKit get away with not throwing?

[1] https://github.com/websanova/wScratchPad/blob/master/wScratchPad.js#L166
[2] https://github.com/jquery/jquery/blob/ad032d3c7df04827989a4187117614c29bf3a4ad/src/event.js#L521-L525

Comment 12

[Mike Taylor [:miketaylr]]

(looks like wesj answered half of my question while I was writing it it ^_^)

Comment 13

[Mike Taylor [:miketaylr]]

> So the question is, whose bug is this? How does Chrome/WebKit get away with not throwing?

Probably because they're passing in the global event object, which is different than an explicit jQuery event argument. Moving this to TE, I can send a PR to the plugin and we can ask Kohl's to upgrade.

Comment 14

[Mike Taylor [:miketaylr]]

Cool, wesj sent in a pull request already: https://github.com/websanova/wScratchPad/pull/29

Comment 15

[Dave Miller [:justdave]]

wonder if wScratchPad is even maintained anymore... last commit is 8 months ago, and there's been other open pull requests open that long with no discussion on them that haven't been taken yet.

Comment 16

[Mike Taylor [:miketaylr]]

@Dave probably not. We should reach out to Kohl's and ask them to either manually update their plugin, or apply wesj's patch @ <https://github.com/wesj/wScratchPad/commit/0149bef1282818b920214187b148f5148538963a.patch>

Comment 17

[David Nyhuis]

Hey everyone!  Before I get into my post, I need to add a little transparency.  I'm a front-end developer at Kohl's, and anything I post here does not represent Kohl's in any way (my words are my own).

First of all, thank you *ALL* very much for noticing this issue and pouring your efforts into crafting a solution.  It's something I love very much about the web development community.  The willingness to be open and be helpful is absolutely amazing!  From my end, I genuinely appreciate all of this from everyone.  I'm commenting only because my coworker, Aaron Kahlhamer, happened to notice a tweet from Ralph Holzmann (https://twitter.com/rlph/status/451745959270035456) regarding your blog post, Mike.

Second, the details of this issue have been passed to the respective development team for consideration and implementation.  Unfortunately, I don't have any details at this time as to when the fix will work its way into production.  I'll gladly reply when appropriate, or this issue can be closed knowing it has made its way to Kohl's (whatever step is deemed necessary).

Thanks again, everyone!

Comment 18

[Mike Taylor [:miketaylr]]

Hi David!

Thanks so much for taking your time to let us know that you guys are aware of the issue. Please let us know if there's anything we can do to help.

Cheers,
Mike

Comment 19

[Mike Taylor [:miketaylr]]

The author of the jQuery plugin just fixed his code: https://github.com/websanova/wScratchPad/commit/13dd8f1769735275208110046af00b5e7e126eaf

Comment 20

[Karl Dubost💡 :karlcow]

This seems to be fixed.