WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED INVALID
263374
scrollIntoView() in overflow is causing the whole page to move upwards slightly
https://bugs.webkit.org/show_bug.cgi?id=263374
Summary
scrollIntoView() in overflow is causing the whole page to move upwards slightly
harnoor1994
Reported
2023-10-19 04:58:46 PDT
element.ScrollIntoView() is causing the whole page to move upwards when scrollIntoViewOptions are { behavior: 'smooth', block: 'start' }; I have seen multiple people reporting the same issue here:
https://stackoverflow.com/a/52835382
And as a workaround I have updated the Options to { behavior: 'smooth', block: 'nearest', inline: 'start' }; However, this is not as smooth as the 'block: start' which works perfectly on Chromium based Browsers. Also workaround breaks when elements are not on screen and ScrollIntoView is called.
Attachments
Test case
(1.19 KB, text/html)
2023-12-18 11:46 PST
,
Simon Fraser (smfr)
no flags
Details
Test case with { behavior: 'smooth', block: 'start' }
(1.31 KB, text/html)
2023-12-18 15:31 PST
,
Simon Fraser (smfr)
no flags
Details
Issue Repro Steps
(42.90 MB, video/quicktime)
2023-12-18 16:43 PST
,
Byungseon(Sun) Shin
no flags
Details
Invisible area introduced by iframe
(93.44 KB, image/png)
2023-12-22 13:12 PST
,
Byungseon(Sun) Shin
no flags
Details
Test case with iframe with { behavior: 'smooth', block: 'start' }
(5.85 KB, text/html)
2023-12-22 13:13 PST
,
Byungseon(Sun) Shin
no flags
Details
Show Obsolete
(1)
View All
Add attachment
proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1
2023-10-19 13:44:09 PDT
I'm confused by the "Web Inspector" prefix. Does this happen in Web Inspector, or does it happen in normal web pages?
harnoor1994
Comment 2
2023-10-25 00:18:09 PDT
Updated the bug title.
Radar WebKit Bug Importer
Comment 3
2023-10-26 04:59:14 PDT
<
rdar://problem/117528549
>
Byungseon(Sun) Shin
Comment 4
2023-11-07 14:09:02 PST
FYI, it's a sample code to explain this issue. -
https://jsfiddle.net/cqzv37nm/4/
Simon Fraser (smfr)
Comment 5
2023-12-18 11:46:42 PST
Created
attachment 469114
[details]
Test case
Simon Fraser (smfr)
Comment 6
2023-12-18 15:27:26 PST
What's happening here is that we reveal the element inside the overflow scroll, and then also scroll the overflow scroller itself to the top of the view, which isn't necessary if it's fully visible. I'll do some testing to see how other browsers behave.
Simon Fraser (smfr)
Comment 7
2023-12-18 15:28:39 PST
The attached test case has identical behavior in Chrome, Firefox and Safari.
Simon Fraser (smfr)
Comment 8
2023-12-18 15:31:49 PST
Created
attachment 469118
[details]
Test case with { behavior: 'smooth', block: 'start' }
Simon Fraser (smfr)
Comment 9
2023-12-18 15:32:51 PST
I don't have enough information to fix this bug at this point. Please attach a test case that has different behavior in Chrome and Safari.
Byungseon(Sun) Shin
Comment 10
2023-12-18 16:43:29 PST
Created
attachment 469120
[details]
Issue Repro Steps
Byungseon(Sun) Shin
Comment 11
2023-12-18 16:46:03 PST
@Simon, thank you for taking time to look at this issue. I may not clearly describe the repro sequences with the test URL. I tried with both of the test cases you attached today and I could easily repro the issue. Please review the attached video capture. To reproduce the issue, click the list and then go to the top of the list and move back and forth afterwards.
Simon Fraser (smfr)
Comment 12
2023-12-18 21:50:03 PST
It looks like you're using a wheel mouse rather than a trackpad, and you're using the mouse wheel while hovered over the scrollbar, is that correct? I'm not sure how this is related to the JS calling scrollIntoView(). Perhaps you're describing a different bug from the original report.
Byungseon(Sun) Shin
Comment 13
2023-12-18 22:16:26 PST
@Simon, that is right. I used mouse wheel event while hovered over the scrollbar. I believe we raised the issue for the mouse wheel event as we refer to the stack overflow discussion <
https://stackoverflow.com/a/52835382
>. But please let me know which parts of bug report may not described incorrectly.
Simon Fraser (smfr)
Comment 14
2023-12-19 10:25:51 PST
Does your issue reproduce in a test case that never calls scrollIntoView()?
Byungseon(Sun) Shin
Comment 15
2023-12-19 10:32:28 PST
@Simon, thank you for the detailed information. Will double check again.
Byungseon(Sun) Shin
Comment 16
2023-12-19 11:59:06 PST
@Simon, I just checked it again without scrollIntoView call and see the same behavior. So, the issue I reproduce is not related to the scrollIntoView. Sorry about the confusion. However, I can also confirm that the original issue reported by Hanoor still related with the scrollIntoView(block: 'start') since it has been fixed by having (block: 'nearest', inline: 'start') options and it is only needed on the Safari Browser. So, I will share more clear repro sequences once we will find a test case for this.
Byungseon(Sun) Shin
Comment 17
2023-12-22 13:12:59 PST
Created
attachment 469177
[details]
Invisible area introduced by iframe
Byungseon(Sun) Shin
Comment 18
2023-12-22 13:13:56 PST
Created
attachment 469178
[details]
Test case with iframe with { behavior: 'smooth', block: 'start' }
Byungseon(Sun) Shin
Comment 19
2023-12-22 13:18:54 PST
@Simon, I could find the issue only happening when there is invisible area as attached image <invisible area introduced by iframe>. Please try with new test case with iframe. When you click the menu item, you can see the page will be moved up by 20px which is same height introduced by the iframe.
Simon Fraser (smfr)
Comment 20
2024-01-02 10:33:15 PST
Thank you for the new test case. I can reproduce.
Simon Fraser (smfr)
Comment 21
2024-01-02 11:41:56 PST
What's happening in your test case is that you end up with two iframes below the 100% height content, making the content scrollable, so clicking on a section tries to scroll as much as it can (20px or so). Still, there's a bug with `block: start`
Byungseon(Sun) Shin
Comment 22
2024-01-02 12:11:18 PST
@simon, thanks for the review the issue. I think we can work around the issue by setting the the iframe to display:block instead of display:inline. Would it be acceptable workaround based on the current test case since we do not want the iframe be shown on the page?
Simon Fraser (smfr)
Comment 23
2024-01-02 13:30:14 PST
https://bugs.webkit.org/attachment.cgi?id=469178
scrolls in Chrome too, but not Firefox.
Simon Fraser (smfr)
Comment 24
2024-01-02 13:35:10 PST
Each iframe adds 20px of scrollable overflow because of `line-height: 20px;`. You should also stop using `overflow: overlay` since this is just a synonym for `overflow: auto` (but this doesn't change behavior). Safari and Chrome have the same behavior here, so I think there's no bug here.
Byungseon(Sun) Shin
Comment 25
2024-01-02 13:56:40 PST
@simon, thanks for taking time to investigate it and confirmation.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug