RESOLVED FIXED279510
width: fit-content is not wrapped and has its overflowing content hidden. (affects popover usability) 
https://bugs.webkit.org/show_bug.cgi?id=279510
Summary width: fit-content is not wrapped and has its overflowing content hidden. (af...
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
DetailsFormatted DiffDiff
[fast-cq]Patch (4.59 KB, patch)
2024-10-26 05:54 PDT, alan 		no flags
DetailsFormatted DiffDiff
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
alan
Comment 10 2024-10-25 20:42:30 PDT
Created attachment 473053 [details] Patch
alan
Comment 11 2024-10-26 05:54:01 PDT
Created attachment 473055 [details] [fast-cq]Patch
EWS
Comment 12 2024-10-28 05:30:44 PDT
Committed 285762@main (def9a2aa335e): <https://commits.webkit.org/285762@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 473055 [details].
Note You need to log in before you can comment on or make changes to this bug.