www.nintendo.co.jp - Unable to move around the zoomed-in image

[simevidas]

URL: https://www.nintendo.co.jp/software/feature/magazine_2022summer/index_en.html?device=pc&page=3

Browser / Version: Firefox 105.0
Operating System: Mac OS X 10.15
Tested Another Browser: Yes Chrome

Problem type: Site is not usable
Description: Browser unsupported
Steps to Reproduce:
When you zoom in on the magazine scan (e.g., by clicking the Zoom In button in the upper right corner, or performing the pinch-to-zoom gesture on the laptop’s trackpad), it is not possible to move around the zoomed-in image.

In Chrome and Safari, the user can drag around the image by pressing down and moving one finger around on the trackpad. This is not possible in Firefox.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Note: The issue does not occur on Chrome.

Tested with:
Browser / Version: Firefox Nightly 105.0a1 (2022-07-31), Firefox Release 103.0
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[qa_31/2022]

[wisniewskit]

I can one-finger pan around the image almost the same way on my macbook in Firefox as I can in Chrome, except that it looks like the default action (of letting the user drag the image off of the browser to save it) is not being prevented, so I see an icon being dragged around until my initial click ends and then I can pan around the image until I lift my finger off of the trackpad entirely.

It makes sense that would only happen on Firefox, because the two images which make up the catalog picture have this CSS:

.local-catalog__zoomImageContent img {
  -webkit-user-drag: none;
}

If that CSS is disabled then Chrome and Safari also do the same thing as Firefox.

The site should be adding draggable="false" to the images to do this the web-standard way. In fact they are adding that property to an ancestor div element of the images, but the images themselves should have that property for it to work. Or they could usepointer-events:none in this case:

.local-catalog__zoomImageContent img {
  pointer-events: none;
}

I've filed https://bugzilla.mozilla.org/show_bug.cgi?id=1786138 to investigate whether Firefox can/should implement the non-standard CSS property.

[webcompat-bot]

Generate outreach template

[ksy36]

intervention https://bugzilla.mozilla.org/show_bug.cgi?id=1800143

[softvision-raul-bucata]

Updated link: https://www.nintendo.co.jp/software/feature/magazine_2022winter/index.html?page=1&device=pc

[inv_04/2023]