Bug 290452

Summary:

With always-on scrollbars, some content shows unnecessary text truncation

Product:

WebKit

Reporter:

petar.dimov

Component:

Layout and Rendering

Assignee:

Sammy Gill <sgill26>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bfulgham, karlcow, koivisto, sgill26, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 18

Hardware:

Mac (Intel)

OS:

macOS 14

See Also:

https://github.com/web-platform-tests/wpt/pull/60071

Attachments:

Description	Flags
Result	none
Test	none
Test reduction	none

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.