Bug 256582 – Mouse wheel event not getting fired above certain element

• Status: RESOLVED
• Resolution: FIXED
• Component: UI Events

[Laszlo]

OS and Browser information:
OS: macOS Monterey Version 12.6.5 (21G531)
Browser: Safari Version 16.4.1 (17615.1.26.101.10, 17615)

URL: https://smartslider3.com/fullsize/

Summary: If you visit the URL above you will find a slider at the top of the page, and if you try to scroll down on the area of the slider, it should make the slider advance to the next slide, but it won't always work in Safari.

Description: The codes responsible for moving the slides are running on the "wheel" event. The problem is that, the "wheel" event won't get fired in Safari. (It works fine in other browsers on the same Mac and also on Windows.)
As I noticed, when I modify CSS properties on some elements, the wheel event start working. ( Open the browser console, sometimes also fixes the problem but after the page is refreshed the problem occurs again. )

You can check whether the wheel event gets fired or not by doing the following:
1.) Open the browser console.
2.) Refresh the linked page: https://smartslider3.com/fullsize/ - just to avoid cases where the "wheel" event starts working because of console opening.
3.) Run this code in the console to track the events fired on the window: monitorEvents(window);
4.) Try to scroll on the area of the slider. Result: mouse wheel event won't get fired.
5.) Scroll down below the slider by using the scroll bar of the browser. Place the cursor over the white area below the slider ( as that is not the part of the slider ) and scroll. Result: mouse wheel event will be fired.

[Simon Fraser (smfr)]

I am not seeing the slider at the top of the page.

[Laszlo]

Created attachment 466313 [details]
A screenshot of the slider

I am attaching a screenshot of the slider and where you can find it in the DOM.

[Simon Fraser (smfr)]

Ah, I inteprested “slider” to be something like a range control. Will test again.

[Alexey Proskuryakov]

I certainly reproduce this with Safari 16.5 beta, using built-in trackpad:

1. Open https://smartslider3.com/fullsize/
2. Put the pointer over the three large dots at the right of the hero image
3. Try scrolling.

Results: the page scroll.
Chrome/Firefox results: the hero image changes to the next one.

[Radar WebKit Bug Importer]

<rdar://problem/109411844>

[Simon Fraser (smfr)]

Are the events getting trapped by the scrollbar?

[Alexey Proskuryakov]

Seems unlikely? Not getting close enough to it to activate.

[Laszlo]

The way this particular hero slider works is that, it prevents the "wheel" event with e.preventDefault() if the cursor is inside the area of the hero slider, except:
-you are on the first image and you scroll up
-or you are on the last image and you scroll down

This way scrolling on the area of the hero slider will make it rather advance to the next/previous slide instead of scrolling the page. And once you reach the first/last slide you can scroll the page itself.

[Simon Fraser (smfr)]

This appears to be working correctly for me in STP 176.

266154@main fixed on issue in this area, but it seems that the problem existed in older builds.

What may be happening on slower devices is that we have a 50ms timeout, where we default to a "non-blocking" wheel event gesture (i.e. preventDefault stops working) if the content takes more than 50ms to respond to the first wheel event in the gesture.

[Laszlo]

(In reply to Simon Fraser (smfr) from comment #9)
> This appears to be working correctly for me in STP 176.
> 
> 266154@main fixed on issue in this area, but it seems that the problem
> existed in older builds.
> 
> What may be happening on slower devices is that we have a 50ms timeout,
> where we default to a "non-blocking" wheel event gesture (i.e.
> preventDefault stops working) if the content takes more than 50ms to respond
> to the first wheel event in the gesture.

Thank you Simon!

Just checked it with Safari 16.6 (18615.3.12.11.2) using macOS Ventura ( 13.5.1 ) and the problem no longer occurs for me either.

I mark this as resolved.