Bug 25062 – The :hover pseudo-class is not triggered on scroll

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Lea Verou]

The :hover pseudo-class is not triggered on scroll.
See attached reduction.

This bug exists for a long time, but I never reported it since it seemed too obvious, so I thought someone else would definitely have. After eventually searching for it, I couldn't find anything relevant, so I decided to report it myself. Sorry if its a duplicate.

[Lea Verou]

Created attachment 29290 [details]
Reduction

[Lea Verou]

I forgot to mention that every non-webkit browser I tried gets it right.

[Mark Rowe (bdash)]

You don't mention how you're scrolling, but on Mac OS X I see the red bar turn blue when scrolling via the keyboard and two-finger scrolling on the trackpad.  This may be Windows-specific or it may be specific to the manner in which you're scrolling.

[Lea Verou]

It happens regardless of whether I use the touchpad, the mouse wheel or the keyboard to scroll.
Perhaps it's a windows-specific issue...

[Alexander Shabanov]

This is not a windows-specific issue. I've seen such an issue on WebKit browser on either Mac and Linux (I checked using the very latest webkit sources).
The bug revealed when scrolling is performed by keyboard, without moving mouse pointer.

[Alexander Shabanov]

Created attachment 43920 [details]
shows issue with triggering hover pseudoclass


Steps to reproduce:

1. Load kbd_move_hover.xhtml in any webkit-based browser (Safari, Chrome, Arora or WebKit launcher).
2. Click on the item with text "3 item" so it will gain focus. The hovered item shall be colored with a green color.
3. Start scroll using keyboard buttons: either up/down or page up/page down keys.

Actual result:
When mouse cursor goes beyond a hovered item, so it does not hovered any more the hover does not dispelled from the mentioned item.
An item that is actually hovered does not marked with ":hover" state.
As a result hovered item might go beyond the visible area in the list scrolled by the keyboard key.

Expected result:
A "hover" state corresponds to the item that is actually under mouse cursor when scrolling is performed by the keyboard keys.
This is exactly as Firefox behaves.

[Alexander Shabanov]

I've attached xhtml that reproduces the problem.

Steps to reproduce:

1. Load kbd_move_hover.xhtml (attachment to this bug) in any webkit-based browser (Safari, Chrome, Arora or WebKit launcher).
2. Click on the item with text "3 item" so it will gain focus. The hovered item will be colored with a green color.
3. Start scroll using keyboard buttons: either up/down or page up/page down keys.

Actual result:
When mouse cursor goes beyond a hovered item, it is still hovered.
As a result hovered item might go beyond the visible area in the list scrolled by the keyboard keys.

Expected result:
A "hover" state corresponds to the item that is actually under mouse cursor when scrolling is performed by the keyboard keys.
This is exactly as Firefox and Opera behave.

[Alexander Shabanov]

And one another comments:
I checked the issue using the latest webkit configured for use Qt (aka QtWebKit).
I do not know whether the issue exists on Gtk or Mac ports of WebKit.
I used quite an old Chromium build to reproduce the problem on linux.

This appears to have been fixed.

[Tim Trentham]

I have this issue in Google Chrome 10.0.648.204. 

Try using the mouse wheel to scroll down this page that uses the hover pseudoclass to display the name of the film that the image is taken from when you hover over the image. It works if I move the mouse to put the cursor over the image, but if I'm scrolling with the mouse wheel, it doesn't.

If it's been fixed, does that mean it's a Google Chrome issue and not a webkit issue?