Bug 279510

Summary:

width: fit-content is not wrapped and has its overflowing content hidden. (affects popover usability)

Product:

WebKit

Reporter:

Rogier de Ruijter <imbashenk>

Component:

Layout and Rendering

Assignee:

alan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

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

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari Technology Preview

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
rendering in safari, firefox, chrome	none
rendering in safari, firefox, chrome for just a div with fit-content	none
reduced testcase	none
Test reduction	none
Patch	none
[fast-cq]Patch	none

Rogier de Ruijter

Reported 2024-09-11 06:24:37 PDT

When using the popover API, a popover flows off the screen when the text gets too long for the top layer. On Chrome, this doesn't happen, and the text is wrapped. Reproduction: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Overflow popover</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> </head> <body> <div popover> This is a popover that will overflow the viewport. On Safari but not on Chrome. </div> </body> <style> [popover] { left: 90%; } </style> <script> this.popover = document.querySelector("[popover]"); this.popover.showPopover(); </script> </html>

Attachments
rendering in safari, firefox, chrome (974.74 KB, image/png) 2024-10-03 00:36 PDT, Karl Dubost	no flags	Details
rendering in safari, firefox, chrome for just a div with fit-content (955.36 KB, image/png) 2024-10-03 01:04 PDT, Karl Dubost	no flags	Details
reduced testcase (346 bytes, text/html) 2024-10-03 16:14 PDT, Karl Dubost	no flags	Details
Test reduction (361 bytes, text/html) 2024-10-25 10:12 PDT, alan	no flags	Details
Patch (5.35 KB, patch) 2024-10-25 20:42 PDT, alan	no flags	Details Formatted Diff Diff
[fast-cq]Patch (4.59 KB, patch) 2024-10-26 05:54 PDT, alan	no flags	Details Formatted Diff Diff
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.

Rogier de Ruijter

Comment 1 2024-09-11 06:27:07 PDT

*** Bug 279512 has been marked as a duplicate of this bug. ***

Radar WebKit Bug Importer

Comment 2 2024-09-18 06:25:16 PDT

<rdar://problem/136219979>

Karl Dubost

Comment 3 2024-10-03 00:36:53 PDT

Created attachment 472781 [details] rendering in safari, firefox, chrome Tested on Safari Technology Preview 202 20620.1.4.8 Firefox Nightly 133.0a1 13324.9.30 Google Chrome Canary 131.0.6753.0 6753.0 The popover is moved to the right side, but the box is not being constrained by the right side of the viewport, so it becomes hidden. The text should be wrapping here.

Karl Dubost

Comment 4 2024-10-03 00:45:36 PDT

Probably the default style should have a `width: intrinsic`

Karl Dubost

Comment 5 2024-10-03 01:01:01 PDT

OK this is a bug with fit-content in fact. We can reproduce it easily with a div. ``` data:text/html,<div style="position:absolute;left:90%;border:1px solid black;width:fit-content;">this is a very very very very long long text in a box</div> ```

Karl Dubost

Comment 6 2024-10-03 01:04:34 PDT

Created attachment 472782 [details] rendering in safari, firefox, chrome for just a div with fit-content Firefox CSS https://searchfox.org/mozilla-central/rev/f0b3dafb55f1e7904847f5dc889f131040789ba6/layout/style/res/html.css#902 WebKit CSS https://github.com/WebKit/WebKit/blob/c4acb0f0486c8d9fafe7aa57eacfa1de91ab102d/Source/WebCore/css/popover.css#L15C1-L16C1 They are the same basically. I wonder if there is already a bug for this.

Karl Dubost

Comment 7 2024-10-03 01:20:54 PDT

Another fit-content bug but related to height and grid in Bug 260461

Karl Dubost

Comment 8 2024-10-03 16:14:00 PDT

Created attachment 472795 [details] reduced testcase

alan

Comment 9 2024-10-25 10:12:17 PDT

Created attachment 473045 [details] Test reduction