1816003 - scroll-margin is ignored if target element has transition-duration > 0s

Status: UNCONFIRMED

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

Description

[6k64x4ma]

Attachment: test.htm

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

Steps to reproduce:

1. Set ui.prefersReducedMotion to 1 in about:config.
2. Go to https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
3. Click on the link under the "In this article".

or

1. Load the attached file.
2. Click on the link to "baz", which has transition-duration: 1ms;.

Actual results:

scroll-margin is ignored.
If I click on the link twice, scroll-margin is applied.
I can also reproduce this issue on Firefox 68.

Expected results:

scroll-margin should be respected.

Comment 1

[Hiroyuki Ikezoe (:hiro)]

Interesting test case. I think this is more or less related to our CSS transition implementation. Though I am not sure it's valid. (I would say it's invalid.)

Anyway, there's a style :traget { scroll-margin: 10vh; }, thus with transition-duration: 1ms, there are four CSS transitions generated, scroll-margin-top from 0 to 10vh, for example. And when we navigate to #baz, the computed scroll-margin values are 0, thus it looks as it it's ignored.

In the scroll-snap spec, scroll-margin is defined as animatable by computed value type, but it looks to me that changing the specified value doesn't require scroll position changes.

Comment 2

[6k64x4ma]

Ah, the real problem here seems to be that Microsoft Edge doesn't apply transition to scroll-margin.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

Filed a spec issue; https://github.com/w3c/csswg-drafts/issues/8445