1406409 - Zalando.de Mouseover defect since ESR 52.0 until 52.4.0

Status: RESOLVED WONTFIX

(Core :: DOM: UI Events & Focus Handling, defect, P3)

Description

[cimba]

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0
Build ID: 20170921064520

Steps to reproduce:

Example link: https://www.zalando.de/schoeffel-outdoorjacke-black-sc742f035-q11.html

The Mouseover at the left pictures work (pictures changing without need of clicking the picture), but the pictures at the rigt (color variantes) did nocht work with mouseover, here is a left mouse click neccessary to change the color of the jacket. Also a vertical scrollbar is schowing, wich is normaly not showing.

And at the bootom "Ähnliche Produnkte", is also only the scrollbar showing, usually there are only big arrows to navigate.

With Firefox ESR 45.9.0 all works fine witz zalando.de




Actual results:

Mouseover at color variantes dont change automatic the pictures


Expected results:

Mouseover changes pictures in suitable color automatic

Comment 1

[Andrew Overholt [:overholt]]

Thanks for the bug report.

(In reply to cimba from comment #0)
> https://www.zalando.de/schoeffel-outdoorjacke-black-sc742f035-q11.html
> 
> The Mouseover at the left pictures work (pictures changing without need of
> clicking the picture), but the pictures at the rigt (color variantes) did
> nocht work with mouseover, here is a left mouse click neccessary to change
> the color of the jacket.

I can reproduce this but it behaves the same in Chrome.

> Also a vertical scrollbar is schowing, wich is
> normaly not showing.

I see the vertical scrollbar in Chrome, too.

> And at the bootom "Ähnliche Produnkte", is also only the scrollbar showing,
> usually there are only big arrows to navigate.

I see a horizontal scrollbar in Firefox and in Chrome. Can you clarify what's incorrect here?

Comment 2

[cimba]

Attachment: Screenshot 1

Comment 3

[cimba]

Attachment: Screenshot 2

Comment 4

[cimba]

I have added 2 screenshots of how the website should look (Screenshot 1 = without scrollbars and mouseover changes product pictures without extra clicking / Screenshot 2 = no scrollbar and a big, transparent arrow at the right side to scroll).

The curious thing: from 3 Windows 8.1 computers works on one computer the Zalando side error-free (as shown in the screenshots). And it is true, Chrome shows also the wrong scrollbars.

The IE and Firefox under 50.x ESR shows also the Side correct without scrollbars.

Hope this helps.

Comment 5

[alexa]

Same here: 
on a Win 10 PC it doesn't work with Firefox 57 and Seamonkey 2.49.1. 
But on another PC with Win 7 it works.
It always works with SeamMonkey 2.48.

Similar with other sites:

In the SoundCloud player widget the position cannot be set and the mouseover-bar is not shown.
https://w.soundcloud.com/player/api_playground.html

Seems to be the same problem:
https://bugzilla.mozilla.org/show_bug.cgi?id=1419428

Comment 6

[alexa]

Seems to be same as mouse over zoom not working on ebay.com:
https://community.ebay.com/t5/Technical-Issues/Mouse-over-zoom-feature-not-working/td-p/26719410

Comment 7

[alexa]

Doesn't work in Firefox since 52 (incl. 52.0b1 and the latest nightly).

In SeaMonkey nightly it doesn't work from 2.49 until 2.51a1, but works since 2.52a1.

As some prominent webpages and several users are affected, I think this should get a higher priority. 
It seems to depend on the windows version (see as well https://community.ebay.com/t5/Technical-Issues/Mouse-over-zoom-feature-not-working/m-p/27764953/highlight/true#M35121).

Comment 8

[Andrew Overholt [:overholt]]

I'm sorry but I'm confused. Can someone please clearly explain what the problem is and what environment is required to trigger it? A screencast or annotated images would help a lot.

I will happily route this to the right people once I have a clear steps-to-reproduce.

Comment 9

[cimba]

Attachment: Screenshot3.gif

Mouse Over animated

Comment 10

[cimba]

How I describe: when you call the zalando page and there is NO scrollbar (like in Internet Explorer) under the right lower pictures, a simple mouseover changes the big picture (like in the new animated screenshot3), but most often, there IS a horizont schrollbar under the two pictures in the lower right pictures and then, you must click on the pictures, to see the jacket in other colors.

At Ebay, there is also mostly often no mouseover zoom at the pictures, in Firefox stands under the picture only "click on picture to zoom".

Comment 11

[alexa]

Attachment: Ebay mouseover working

Ebay zoom working on mouseover working

Comment 12

[alexa]

Attachment: SoundCloud mouseover and click working

Comment 13

[alexa]

In the above attachments you can see how it should work. E.g. SoundCloud:

1. Open https://w.soundcloud.com/player/api_playground.html
2. Start playing music by pressing the orange play button or by clicking into the waveform
3. Hover with the mouse over the waveform
4. Click somewhere in the waveform to seek

With FireFox >52 hovering over the waveform or clicking into the waveform don't work, so there is no.

The problem depends on multitouch.
 
In an Oracle VM VirtualBox it is reproducible with a fresh Win 10. Go to VM Settings, System, Motherboard, Pointing Device, select "USB Multi-Touch Tablet".

On my physical PC I was able to solve the problem by updating to the latest generic Synaptics touch pad driver (instead of the official one from Microsoft/Lenovo). 

(As described in https://bugzilla.mozilla.org/show_bug.cgi?id=1419428)

Comment 14

[alexa]

With Firefox >=52 (...)

Comment 15

[alexa]

Funny: on the Swiss Zalando website of the same article (only difference in the URL is .ch instead of .de) changing the colour by hovering works, so there must be some subtle differences:
https://www.zalando.ch/schoeffel-outdoorjacke-black-sc742f035-q11.html

On both .ch and .de hovering over the big picture should zoom in, that doesn't work on both websites with FF >=52 and multitouch.

Comment 16

[alexa]

In Chrome it works if "Touch Events API" is set to Disabled in chrome://flags (see https://emby.media/community/index.php?/topic/25974-chrome-win-10-issue-mouse-hovercontext-menu-issue/). By default it is enabled when a touchscreen is detected on startup.

Comment 17

[alexa]

In FireFox/SeaMonkey it works if touch events are disabled: 
1) about:config
2) Search dom.w3c_touch_events.enabled (default value is 2)
3) Change value to 0

So the problem seems to be that "ontouchstart" is detected even if in fact there is no touchscreen. 
Some websites then disable some mouse functionality.

The question is: is it a Microsoft, Synaptics or Chrome/FireFox/SeaMonkey bug?

(See as well e.g.: 
https://bugzilla.mozilla.org/show_bug.cgi?id=1291631
https://bugzilla.mozilla.org/show_bug.cgi?id=1321758
)

Comment 18

[alexa]

Attachment: test.html to check for ontouchstart

With the attached test.html you can check if 'ontouchstart' is detected.

@Cimba and @overholt: 
Could you please try this? 
If it says touch is detected, do you indeed have a touch screen or is it a false positive?

Comment 19

[Andrew Overholt [:overholt]]

Stone knows about touch events. See comment 17; is this a bug in our touch events implementation or is it an issue with these websites (or maybe some library they're using)?

Comment 20

[cimba]

> @Cimba and @overholt: 
> Could you please try this? 
> If it says touch is detected, do you indeed have a touch screen or is it a
> false positive?

Sorry for the late response:
It says "ontouchstart found. maxTouchPoints: undefined, msMaxTouchPoints: undefined" and I have no touch screen, but a Synaptics touch pad.

Comment 21

[Ming-Chou Shih [:stone]]

Added this to my todo list.

Comment 22

[Ming-Chou Shih [:stone]]

By default (except Mac), we query the touch screen information from OS to determinate whether the touch events APIs are supported. It's a known issue that OS could fool us there is a touchscreen while it's not. My understanding is that there may be some device related services running on Windows. Stop them could fix the problem. See https://github.com/Modernizr/Modernizr/issues/880 for more detailed information.

Comment 23

[Ming-Chou Shih [:stone]]

Closed this since the cause isn't in Firefox.