1918906 - scroll anchor adjustment interrupt smooth scroll operation by scroll-to-anchor

Status: RESOLVED FIXED

(Core :: Layout: Scrolling and Overflow, defect, P3)

Description

[masoda]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0

Steps to reproduce:

added to CSS
html { scroll-behavior: smooth }
a:hover { transform: scale(x); } with ease-in-out
(animate/show <a> linking to anchors in the html)
.zoom:hover { transform: scale(1.3); } class on 2 img

Actual results:

1. go to test page :
   https://semences-fermieres.com/Plant/fr/content/32-tricoter-sur-machine-a-tricoter-domestique
2. click on (top of the page) : Oriente pour des Formations en Tricot Machine
3. Result :
   page scrolling to anchors won't land to proper location
   it stops scrolling a little before target anchor (if little distance to scroll to) to a lot before (if bigger distance which seems proportionate to distance to scroll to)

REMARKS
a. tested on computer
b. the link/anchor architecture is correct
c. this browsing architecture worked precisely in Firefox BEFORE adding these animations
d. works as it should in Chrome (sometimes with a glitch)
e. works as it should in Edge (idem)
f. it seems that some computation in the rendering is affected by a proportion (scale), that it is subsequently compensated in Chrome and Edge but not in Firefox

Expected results:

scroll smooth to target anchor when click <a> link-to-anchor

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:hiro, could you have a look please?

For more information, please visit BugBot documentation.

Comment 2

[Hiroyuki Ikezoe (:hiro)]

Attachment: A simplified test case

A real problem in the site is this style on <a>;

a {
  transition: all .2s ease-in-out;
}
a:hover {
  font-size: 1.3em;
}

Because of the font-size transition once after the smooth scroll happened, a font-size transition starting with font-size: 1.3em to font-size: 1em starts, and it changes the container size, thus it changes the scroll position a bit, thus a scroll anchor adjustment happens, and then it interrupts the smooth scroll unfortunately.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

Attachment: Bug 1918906 - Set `TriggerByScript` to AnchorScrollFlags to ignore scroll anchor adjustments during (smooth) scrolling to anchor. r?botond

Since bug 1789930 we have allowed scroll anchor adjustments during scroll
operations by user. To tell whether the given scroll operation is done by user
or by script, we introduced ScrollFlags::TriggerByScript. Though scrolling to
anchor is kinda user triggered scroll operation, it would make sense to not allow
scroll anchor adjustments during scrolling to anchor.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0459776a6383
Set `TriggerByScript` to AnchorScrollFlags to ignore scroll anchor adjustments during (smooth) scrolling to anchor. r=botond

Comment 5

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/48555 for changes under testing/web-platform/tests

Comment 6

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/0459776a6383

Comment 7

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot