1291631 - http://www.vaude.com/ supposes mouseover event cannot be fired when window.ontouchstart is present

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P3)

Description

[Jonas Thiem]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:49.0) Gecko/20100101 Firefox/49.0
Build ID: 20160801004002

Steps to reproduce:

Firefox causes mouse clicks in pages when I'm not clicking. This is usually 1-2 seconds after a previous click and started happening 1-2 days ago in the developer edition, so most likely with some recent update. No other application on my machine is affected.

It is pretty simple to reproduce:
1. Go to Amazon or some other site that opens up menus with javascript when you click a button
2. Click on the menu button to open the menu and move the mouse down on some menu item
3. A second click should be triggered after pretty much no time, causing an unintended page navigation

This happens in safe mode in a new profile as well, and it happens all the time and not just sometimes, and I've seen it in the Vaude outdoor shop and Amazon so far, so it's not just one single site either.


Actual results:

Unintented click triggered


Expected results:

No unintended click triggered

Comment 1

[Tooru Fujisawa [:arai]]

Can you describe the reproduction steps more exactly?
especially, which URL and which button? (screenshot is better)

looks like https://www.amazon.com/ page doesn't have any button that needs "click" to open the menu.
just hovering the mouse cursor onto the button opens the menu.
clicking the menu button jumps to other page.

Comment 2

[Tooru Fujisawa [:arai]]

(In reply to Tooru Fujisawa [:arai] from comment #1)
> clicking the menu button jumps to other page.

I meant, clicking the *button, not menu

Comment 3

[Jonas Thiem]

Hm maybe I was just being too silly clicking the button when the page didn't want me to, and internet was a bit slow and I thought the subsequent page reload was triggered by something on a menu item  when it wasn't :)

Can you confirm simply hovering the mouse on one of the product images here causes a page navigation for you as well? http://www.vaude.com/en-GB/Products/Backpacks/Backpacking-Packs/ If yes, I suppose this is just the Vaude site being broken and me being silly in addition on Amazon...

Comment 4

[Tooru Fujisawa [:arai]]

(In reply to Jonas Thiem from comment #3)
> Can you confirm simply hovering the mouse on one of the product images here
> causes a page navigation for you as well?
> http://www.vaude.com/en-GB/Products/Backpacks/Backpacking-Packs/

You mean the image of those backpacks?
Hovering mouse doesn't cause any page navigation.
Just shows details, or changes color of the backpack.

what happens for your case?  where does hovering mouse navigates you to?

Comment 5

[Jonas Thiem]

Attachment: Demonstrates some sort of automatic click without me actually clicking on vaude.com

I attached a video which shows what happens on Vaude.com: I'm just using the trackpoint to move the mouse in the video, I'm not actually clicking at any point. This is not happening in Google Chrome.

Since it's just a single site, I'm not convinced it's not just a site bug though. I was being stupid on Amazon.com and thought it was a sort of systemic problem, but I was just being silly. Sorry for the unrelated Amazon confusion.

Comment 6

[Tooru Fujisawa [:arai]]

(In reply to Jonas Thiem from comment #5)
> Created attachment 8777259 [details]
> Demonstrates some sort of automatic click without  me actually clicking on
> vaude.com
> 
> I attached a video which shows what happens on Vaude.com: I'm just using the
> trackpoint to move the mouse in the video, I'm not actually clicking at any
> point. This is not happening in Google Chrome.

Just to be sure, this also happens with safe mode and new profile, right?  (the video doesn't look like either)
Also, do you have any idea what the magnifier cursor means? (like some add-on or system utility?)

Comment 7

[Jonas Thiem]

It happens with a fresh profile in safe mode, I just tested again to be sure: I started with "firefox -P --safe-mode" and then "Create New Profile".

I was under the impression the magnifier cursor is done via CSS / through the website, I have never seen it anywhere else.

Comment 8

[Tooru Fujisawa [:arai]]

Thanks again :)

(In reply to Jonas Thiem from comment #7)
> I was under the impression the magnifier cursor is done via CSS / through
> the website, I have never seen it anywhere else.

Yeah, I confirmed the magnifier cursor is used in the following page, that is linked from the backpack image.
http://www.vaude.com/en-GB/Products/Backpacks/Backpacking-Packs/Women-s-Asymmetric-38-8-red.html
so surely it should be website's image.
but so far I don't see it in http://www.vaude.com/en-GB/Products/Backpacks/Backpacking-Packs/


btw, is there any other website the issue happen?  if so, what's the URL?

also, do you happen to have mouse or some pointing device other than trackpoint?  does the same issue happen with them?

Comment 9

[Jonas Thiem]

(In reply to Tooru Fujisawa [:arai] from comment #8)
> btw, is there any other website the issue happen?  if so, what's the URL?
Sadly no. I thought Amazon but I was mistaken

> 
> also, do you happen to have mouse or some pointing device other than
> trackpoint?  does the same issue happen with them?
I can use the stylus and hover it to only move the mouse (without touching the screen which triggers a click), and as soon as I hover over one of the product photos it will also trigger a redirect similar to what happens with the trackpoint.

(this laptop has an integrated Wacom stylus thing, it's a Thinkpad Yoga 260)

Comment 10

[Tooru Fujisawa [:arai]]

(In reply to Jonas Thiem from comment #9)
> > also, do you happen to have mouse or some pointing device other than
> > trackpoint?  does the same issue happen with them?
> I can use the stylus and hover it to only move the mouse (without touching
> the screen which triggers a click), and as soon as I hover over one of the
> product photos it will also trigger a redirect similar to what happens with
> the trackpoint.

Thanks, so it's not input-device-dependent issue.

The other possibility is that they're serving different page for us.
Can you save the page with "Web page, complete" format, and check if the issue happens also with saved HTML file?
If the issue happens with saved HTML file, can you upload the HTML file and the directory ends with "_files" ? (in a zip archive or something)

* Please make sure using new profile when saving the page, without any login information.
  Looks like the page has login form, and saving the logged in page may leak your data.

Comment 11

[Jonas Thiem]

Sadly, it doesn't seem to reproduce in offline mode with the web page downloaded: I can see errors on the JavaScript console that don't show up when visiting the page online, like "ReferenceError: NREUM is not defined", "Error: Cannot find module 'handle'" and more- maybe they are fetching some stuff dynamically which doesn't work in offline mode due to some same origin policy problems or similar?

Comment 12

[Jonas Thiem]

Short note to avoid confusion: sorry I chose the words a bit poorly, I didn't enable a specific offline mode or disable networking - I just meant opening the webpage from the downloaded thing instead of the online version from the web.

Comment 13

[Tooru Fujisawa [:arai]]

Thank you for checking :)

If the issue doesn't happen when JavaScript isn't working correctly, it might be some issue with JavaScript used in the page.

Can you try disabling JavaScript after loading online page?

Comment 14

[Tooru Fujisawa [:arai]]

Attachment: How to Disable JavaScript

you can disable JavaScript from Developer tools.

Comment 15

[Jonas Thiem]

Indeed it seems to work fine (no weird redirect like I clicked something) when javascript is disabled.

Comment 16

[Tooru Fujisawa [:arai]]

Thanks :)

I found suspicious code in their JS.

http://www.vaude.com/out/responsive/src/min/js/alist.js?1470118279
>         initHover: function() {
>             // Handle mouseover and click (for iPad it is the same)
>             jQuery(".item .js-link").on("mouseover touchstart", function(e) {
>                 // Hide all slider
>                 jQuery(".item .pictureslider").css("visibility", "hidden");
>                 if (jQuery(this).children(".produkt-detail").css("display") == "none") {
>                     // Hide all information
>                     jQuery(".item .produkt-detail").css("display", "none");
>                     // Show information and slider
>                     jQuery(this).children(".produkt-detail").css("display", "block");
>                     jQuery(this).parents(".inner").css("background", "#FFF");
>                     jQuery(this).parents(".inner").children(".pictureslider").css("visibility", "visible");
>                 } else {
>                     // Hide all information
>                     jQuery(".item .produkt-detail").css("display", "none");
>                     if (vdMediaQuery.isTouchDevice()) {
>                         window.location.href = jQuery(this).attr("href");
>                     }
>                 }
>             });

http://www.vaude.com/out/responsive/src/min/js/generell.js?1470118279
> var vdMediaQuery = function() {
> ...
>     function isTouchDevice() {
>         return !!("ontouchstart" in window);
>     }

They're listening on mouseover event and touchstart event for elements with "js-link" class (the backpack image has such element as its ancestor).
In the event handler, when an element with "produkt-detail" class inside the link doesn't have "display: none" style, it jumps to the link, if they detect it's a touch device.

So, looks like, the website supposes that a touch device doesn't have other pointing device that can fire mouseover event.
This sounds like simply the website's bug.

I confirmed the strange page navigation when I set "dom.w3c_touch_events.enabled" pref to 1 and hover the backpack image.
Jonas, your laptop has touch screen, right?


Although this looks like website's bug, there might be something to think about for touch event, for web-compat, so moving to "Core - DOM: Events" component, just in case.

Comment 17

[Jonas Thiem]

As for compatibility: Google Chrome seems to support touch on the website to some extent (scrolling with touch is e.g. supported, and I can "click" stuff by touching it), but there this problem isn't present. So they seem to do something different which works around this issue in some way.

(In reply to Tooru Fujisawa [:arai] from comment #16)
> Jonas, your laptop has touch screen, right?
Yea it does

Comment 18

[Tooru Fujisawa [:arai]]

In Google Chrome, when I set chrome://flags/#touch-events to "Enabled", the page also does strange navigation when I hover the backpack image.

Comment 19

[Tooru Fujisawa [:arai]]

Attachment: testcase that detects window.ontouchstart

Jonas, can you open this HTML file with Google Chrome?
if it shows "window.ontouchstart is not present", that should be the reason of the behavior difference in Vaude page.

Comment 20

[Jonas Thiem]

(In reply to Tooru Fujisawa [:arai] from comment #19)
> if it shows "window.ontouchstart is not present", that should be the reason
> of the behavior difference in Vaude page.
It shows not present in Chrome! So I guess that is why it works there..

Comment 21

[Andrew Overholt [:overholt]]

kats, what do you think about this bug?

Comment 22

[Kartikaya Gupta (email:[e-mail])]

Definitely seems like a site issue. They shouldn't be assuming mouse and touch are mutually exclusive. The same problem occurs in Chrome on my touch-enabled Windows machine. Chrome has touch events enabled by default on Windows but not Linux, which explains why Jonas wasn't seeing it in Chrome on Linux.

Comment 23

[Mike Taylor [:miketaylr]]

See the affected code in Comment #16 -- they should ensure that their site works when both mouse and touch events are possible (e.g., fancy touch-screen laptops).

Comment 24

[Mike Taylor [:miketaylr]]

I'm not able to to reproduce this anymore. Either they fixed, or redesigned the site.