UI / Touch widget behavior fails on Fennec

RESOLVED FIXED

Status

P1
normal
RESOLVED FIXED
4 years ago
5 months ago

People

(Reporter: capella, Assigned: karlcow)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [country all] [js] [contactready], URL)

(Reporter)

Description

4 years ago
Not sure who to cc: on this ... (adding kats 'cause maybe?)

On page [0] halfway down and below the gif, there is an image with a red vertical "sizer" widget [1] (terminology?) ... designed to allow swiping left/right for visual image compares.

This doesn't seen to work for Fennec (phone GS3 / table N7), though it works fine on desktop.

For Chrome, it works for both Desktop / Mobile.


[0] http://space.io9.com/this-shower-of-gamma-rays-are-from-a-flaring-blazar-5-b-1717123013
[1] https://www.dropbox.com/s/f2nkg5c1pe7lr8q/Screenshot_2015-07-17-16-46-05.png?dl=0
Hm, for me when I tap on the image to the left or the right of the red line the line slides over. I can't see to actually *drag* the red line, but I can get it to move where I want easily enough. But yeah, with Chrome I can drag it.

Looking at <div class="jx-slider"> thing in WebIDE they register a touchstart listener on it which updates the slider, but also registers a touchmove listener which further updates the slider. (First bug: they never unregister the touchmove listener, so every time you put your finger down on the image there's an additional touchmove listener). The actual bug appears to be inside the touchmove listener, where they pass "event" instead of "e" to the updateSlider function. Presumably this works in Chrome but doesn't work in Firefox. I think (but am not sure) that this is a known difference in behaviour between Chrome and Firefox, and presumably they only tested in Chrome.
In other words, in the following file: http://gawker-labs.com/slider/global.js this bit of code:

this.addEventListener("touchmove",function(e){e=e||t.event,e.preventDefault(),n.updateSlider(event,!1)}

should really look like this:

this.addEventListener("touchmove",function(e){e=e||t.event,e.preventDefault(),n.updateSlider(e,!1)}

(... and the touchstart listener should avoid registering the touchmove more than once)
(Reporter)

Comment 3

4 years ago
Nice! So my desktop handles it with the proper mouse events, and this is a page design issue.

kats, thanks for your time !
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → WORKSFORME
If the page is still broken in Fennec, we should reopen this as a webcompat issue.
(Reporter)

Comment 5

4 years ago
Attaching the interesting bit of code from that page after manual de-obfuscate [0]

The bits on line 26, 32 refer to |event| vs. say |e| in that context, and line 26 specifically seems responsible for the behavior difference observed here.

) Chrome, Opera, and com.android.browser ... seem to handle this in mobile.
) FF Desktop works due to use of the mouse events listeners.

Chatted with arai on irc, who suggested maybe smaug for the DOM Event question?

[0] https://www.dropbox.com/s/nfo3j7orlyru2qa/bug1185099_snip.js?dl=0
Status: RESOLVED → REOPENED
Flags: needinfo?(bugs)
Resolution: WORKSFORME → ---
(Reporter)

Comment 6

4 years ago
ms2ger points out: Bug 218415 - Request for window.event object added to DOM to ease cross browser scripting
Has anyone reported the issue to the website?
(Reporter)

Comment 8

3 years ago
Switching to Tech Evangelism ...

"we may want to implement window.event although that is a super ugly API"
Component: General → Desktop
Product: Firefox for Android → Tech Evangelism
(Reporter)

Updated

3 years ago
Flags: needinfo?(bugs)

Updated

3 years ago
Component: Desktop → Mobile
(Assignee)

Updated

3 years ago
OS: Unspecified → Android
Hardware: Unspecified → ARM
Whiteboard: [country all] [js] [contactready]
(Assignee)

Comment 9

3 years ago
contacttwitter
Confirmed on a recent build of Firefox Android with version number as explained in Comment #1
io9.com is part of gawker publishing group.


They have a support center 
http://help.gawker.com/customer/portal/emails/new

There are also on GitHub which might be easier to reach out the right person
https://github.com/gawkermedia
https://github.com/orgs/gawkermedia/people


Trying a first contact
http://twitter.com/MozWebCompat/status/625800358724435969
Assignee: nobody → kdubost
Status: REOPENED → ASSIGNED
(Reporter)

Comment 10

3 years ago
fyi, another (current) example of |gawker-labs.com/slider| mobile touch failure ... this time at Gizmodo

http://gizmodo.com/before-and-after-pics-of-californias-shrinking-salton-s-1735625267
Still an issue, re-tested in Nightly. I can pan the image back and forth, but the "divider" doesn't follow the finger like it does in Chrome. Karl, perhaps try again?
(Assignee)

Comment 12

3 years ago
ni myself, so I don't forget
Flags: needinfo?(kdubost)
(Assignee)

Comment 13

3 years ago
Let me try again
http://twitter.com/MozWebCompat/status/753059423363354624
Flags: needinfo?(kdubost)
See Also: → bug 1287057
Depends on: 218415
Priority: -- → P1
You have to click through to http://kinja-labs.com/slider/?img1=http://www.nasa.gov/sites/default/files/3c279_before_labels.jpg&img2=http://www.nasa.gov/sites/default/files/3c279_after_labels.jpg&start=50&color=red now, but this is working now.
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago5 months ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.