[Webkit-unassigned] [Bug 284644] New: <select> element with long <option> text causes horizontal scrolling in grid or flex containers

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=284644

            Bug ID: 284644
           Summary: <select> element with long <option> text causes
                    horizontal scrolling in grid or flex containers
           Product: WebKit
           Version: Safari 18
          Hardware: iPhone / iPad
                OS: iOS 16
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: luaus.hundred0v at icloud.com
                CC: koivisto at iki.fi

Created attachment 473563

  --> https://bugs.webkit.org/attachment.cgi?id=473563&action=review

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20241213/53dc72fc/attachment.htm>