RESOLVED FIXED284644
<select> element with long <option> text causes horizontal scrolling in grid or flex containers 
https://bugs.webkit.org/show_bug.cgi?id=284644
Summary <select> element with long <option> text causes horizontal scrolling in grid ...
luaus.hundred0v
Reported 2024-12-13 11:07:11 PST
Created attachment 473563 [details] HTML Example When using a <select> element inside a grid or flex container, and the <option> inside the <select> contains long text, an issue arises in Safari for iOS: 1. When the max-width property is applied to the <select> element, the visible width of the <select> appears to respect the specified max-width. 2. However, the page displays an unnecessary white space on the right side, and horizontal scrolling becomes enabled. 3. Applying overflow-x: hidden; to the <select> element prevents the horizontal scrolling issue. This issue seems to occur only in Safari and does not appear in other browsers like Chrome for Android. Potential Workaround: Adding overflow-x: hidden; to the <select> element resolves the horizontal scrolling issue.
Attachments
HTML Example (987 bytes, text/html)
2024-12-13 11:07 PST, luaus.hundred0v 		no flags
Details
rendering in safari iOS 18.2 (952.82 KB, image/png)
2024-12-24 04:10 PST, Karl Dubost 		no flags
Details
rendering in safari iOS 18.2 (scrollable) (322.67 KB, image/jpeg)
2024-12-24 04:12 PST, Karl Dubost 		no flags
Details
HTML Example 2 (336 bytes, text/html)
2025-09-04 17:22 PDT, taro.suzuki 		no flags
Details
Patch (1.87 KB, patch)
2025-09-04 19:56 PDT, alan 		no flags
DetailsFormatted DiffDiff
Patch (6.72 KB, patch)
2025-09-05 07:15 PDT, alan 		no flags
DetailsFormatted DiffDiff
[fast-cq]Patch (6.93 KB, patch)
2025-09-05 08:16 PDT, alan 		ews-feeder: commit-queue-
DetailsFormatted DiffDiff
HTML Example 3 (379 bytes, text/html)
2025-09-24 19:06 PDT, taro.suzuki 		no flags
Details
HTML Example 3 (356 bytes, text/html)
2025-09-24 19:19 PDT, taro.suzuki 		no flags
Details
Show Obsolete (3) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2024-12-17 12:33:49 PST
<rdar://problem/141633685>
Karl Dubost
Comment 2 2024-12-24 04:10:52 PST
Created attachment 473653 [details] rendering in safari iOS 18.2 This is what I get on Safari iOS 18.2
Karl Dubost
Comment 3 2024-12-24 04:12:50 PST
Created attachment 473654 [details] rendering in safari iOS 18.2 (scrollable) We can see the white space on the right side.
taro.suzuki
Comment 4 2025-09-04 17:22:14 PDT
Created attachment 476644 [details] HTML Example 2 I can reproduce the issue with Epiphany Technology Preview 49.rc-16-g32bfe2936+ .
alan
Comment 5 2025-09-04 19:56:15 PDT
Created attachment 476645 [details] Patch
alan
Comment 6 2025-09-05 07:15:43 PDT
Created attachment 476649 [details] Patch
alan
Comment 7 2025-09-05 08:16:18 PDT
Created attachment 476654 [details] [fast-cq]Patch
EWS
Comment 8 2025-09-05 09:55:05 PDT
Committed 299631@main (6896a514b489): <https://commits.webkit.org/299631@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 476654 [details].
Ahmad Saleem
Comment 9 2025-09-05 12:22:29 PDT
It landed but it seems bot didn't marked this bug as 'RESOLVED FIXED', so doing it manually.
taro.suzuki
Comment 10 2025-09-24 19:06:21 PDT
Created attachment 476852 [details] HTML Example 3 The issue still reproduces in Safari Technology Preview 228 with the attached testcase.
taro.suzuki
Comment 11 2025-09-24 19:19:21 PDT
Created attachment 476853 [details] HTML Example 3
alan
Comment 12 2025-09-26 07:22:10 PDT
This is indeed not fixed for the case where <select> is a child of a flex item and not the flex item itself. Do you mind if I file a separate bugzilla for this case?
alan
Comment 13 2025-09-28 06:17:37 PDT
bug 299698
Note You need to log in before you can comment on or make changes to this bug.