WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
290452
With always-on scrollbars, some content shows unnecessary text truncation
https://bugs.webkit.org/show_bug.cgi?id=290452
Summary
With always-on scrollbars, some content shows unnecessary text truncation
petar.dimov
Reported
2025-03-26 07:12:42 PDT
The following style makes content, which would otherwise displayed fully, truncate: ::-webkit-scrollbar { background-color: blue; } Result:
Attachments
Result
(15.45 KB, image/png)
2025-03-26 07:13 PDT
,
petar.dimov
no flags
Details
Test
(1.59 KB, text/html)
2025-03-27 15:51 PDT
,
Simon Fraser (smfr)
no flags
Details
Test reduction
(300 bytes, text/html)
2025-03-29 06:13 PDT
,
alan
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
petar.dimov
Comment 1
2025-03-26 07:13:53 PDT
Created
attachment 474722
[details]
Result
petar.dimov
Comment 2
2025-03-26 07:15:13 PDT
Comment hidden (obsolete)
Full html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Scrollbar Issue</title> <style> .parent { position: fixed; box-shadow: 5px 5px 10px rgba(0,0,0,0.5); max-height: 500px; display: flex; flex-direction: column; } .scrollSection { overflow: auto; flex: 1 1 100%; } .item { display: flex; height: 10rem; border: 1px solid black; } .item > span { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } ::-webkit-scrollbar { background-color: blue; } </style> </head> <body> <div class="parent"> <div class="scrollSection"> <div> <div class="item"> <span> Text Text Text Text Text Text Text Text Text </span> </div> <div class="item"> <span> Text Text Text Text Text Text Text Text Text </span> </div> <div class="item"> <span> Text Text Text Text Text Text Text Text Text </span> </div> <div class="item"> <span> Text Text Text Text Text Text Text Text Text </span> </div> <div class="item"> <span> Text Text Text Text Text Text Text Text Text </span> </div> <div class="item"> <span> Text Text Text Text Text Text Text Text Text </span> </div> <div class="item"> <span> Text Text Text Text Text Text Text Text Text </span> </div> <div class="item"> <span> Text Text Text Text Text Text Text Text Text </span> </div> </div> </div> </div> </body> </html>
Simon Fraser (smfr)
Comment 3
2025-03-27 15:51:02 PDT
Created
attachment 474743
[details]
Test
Simon Fraser (smfr)
Comment 4
2025-03-27 15:52:43 PDT
Does not happen in Chrome.
Simon Fraser (smfr)
Comment 5
2025-03-27 15:57:07 PDT
We also truncate if you turn on always-on scrollbars, and remove the `::webkit-scrollbar`. If layout is triggered, we'll remove the ellipses. I think this related to how we assume there's a vertical scrollbar on the first layout.
alan
Comment 6
2025-03-29 06:13:11 PDT
Created
attachment 474756
[details]
Test reduction Flex layout does not seem to take scrollbar width into account when sizing its flex item(s).
Radar WebKit Bug Importer
Comment 7
2025-04-02 07:13:14 PDT
<
rdar://problem/148428628
>
Sammy Gill
Comment 8
2026-05-15 11:19:37 PDT
Still happens on trunk but I think I have a fix in sight
Sammy Gill
Comment 9
2026-05-20 09:57:52 PDT
Pull request:
https://github.com/WebKit/WebKit/pull/64318
Sammy Gill
Comment 10
2026-05-20 09:58:20 PDT
***
Bug 314140
has been marked as a duplicate of this bug. ***
EWS
Comment 11
2026-05-20 10:35:21 PDT
Committed
313584@main
(83e73fd66b2d): <
https://commits.webkit.org/313584@main
> Reviewed commits have been landed. Closing PR #64318 and removing active labels.
Sammy Gill
Comment 12
2026-05-21 10:33:42 PDT
Submitted web-platform-tests pull request:
https://github.com/web-platform-tests/wpt/pull/60071
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