Bug 284644

Summary:

<select> element with long <option> text causes horizontal scrolling in grid or flex containers

Product:

WebKit

Reporter:

luaus.hundred0v

Component:

Layout and Rendering

Assignee:

alan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

ahmad.saleem792, bfulgham, karlcow, koivisto, sgill26, simon.fraser, taro.suzuki, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 18

Hardware:

iPhone / iPad

OS:

iOS 16

Bug Depends on:

299698

Bug Blocks:

Attachments:

Description	Flags
HTML Example	none
rendering in safari iOS 18.2	none
rendering in safari iOS 18.2 (scrollable)	none
HTML Example 2	none
Patch	none
Patch	none
[fast-cq]Patch	ews-feeder: commit-queue-
HTML Example 3	none
HTML Example 3	none

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	Details Formatted Diff Diff
Patch (6.72 KB, patch) 2025-09-05 07:15 PDT, alan	no flags	Details Formatted Diff Diff
[fast-cq]Patch (6.93 KB, patch) 2025-09-05 08:16 PDT, alan	ews-feeder: commit-queue-	Details Formatted Diff Diff
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.