":hover" interrupts "position:sticky" when scrolling with the mousewheel
Categories
(Core :: Layout: Positioned, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox-esr115 | --- | unaffected |
| firefox-esr140 | --- | unaffected |
| firefox147 | --- | affected |
| firefox148 | --- | affected |
| firefox149 | --- | affected |
People
(Reporter: tgv.adn.h2o.xyz, Unassigned, NeedInfo)
References
(Regression)
Details
(Keywords: nightly-community, regression)
Attachments
(1 file)
|
178 bytes,
text/html
|
Details |
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0
Steps to reproduce:
147.0 (64-bit), Windows 10
build ID: 20260105210555
Since updating to the latest release version, I've been experiencing an issue with sticky elements becoming temporarily frozen when that element and an element with ":hover" styles have been moused over in a specific sequence.
Use the following HTML and steps to reproduce the bug:
<html><head>
<style>a:hover{color:#F00;}</style>
</head>
<body style="height:3000px;">
<nav style="position:sticky;top:0;">STICKY NAV</nav>
<a>HOVER ELEMENT</a>
</body></html>
1) Mouse over HOVER ELEMENT, then STICKY NAV, then HOVER ELEMENT, in this exact sequence.
2a) Move the cursor down so it doesn't touch either element, and scroll down using the mousewheel. The sticky element will not follow the screen until having scrolled down far enough (distance varies with viewport height).
OR
2b) Keep the cursor over HOVER ELEMENT and scroll down using the mousewheel. The sticky element will not follow the screen until scrolling has stopped (more obvious with smooth scrolling enabled).
3) After step 2a, doing any of the following will unfreeze and bring the STICKY NAV back on screen (not an exhaustive list):
- Mousing over HOVER ELEMENT again,
- Mousing over the scroll bar,
- Using the arrow keys to scroll,
- Changing focus to or from the Firefox window from or to another.
The HOVER ELEMENT can be any type of element (not just <a>), and the hover style can be anything as well (not just color). The height style added to the body is only so we're actually able to scroll down, but otherwise is of no consequence to this issue. Doesn't matter either if the ":hover" style is in a style tag or a CSS file, or whether it's applied to an element or class.
The issue persists when using a new Firefox profile. I did not test the issue on a Nightly build.
|
||
Comment 1•7 hours ago
|
||
|
|
||
Comment 2•7 hours ago
|
||
The sticky element will not follow the screen even if wheel scrolling has been stopped.
screencast: https://youtu.be/01T2Obldu2w
Regression window:
https://hg-edge.mozilla.org/integration/autoland/pushloghtml?fromchange=a55e6a8352a8395f09179cf38ab75a7ad69e1d25&tochange=1e6f6deb5ae17dfbda69db09f882c80faf69e0c0
|
||
Comment 3•6 hours ago
|
||
:botond, since you are the author of the regressor, bug 1730749, could you take a look? Also, could you set the severity field?
For more information, please visit BugBot documentation.
Description
•