[Webkit-unassigned] [Bug 232421] New: min() function returns larger of two values instead of smaller

[bugzilla-daemon at webkit.org]

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

            Bug ID: 232421
           Summary: min() function returns larger of two values instead of
                    smaller
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Mac (Intel)
                OS: macOS 11
            Status: NEW
          Severity: Major
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: brandon at dreamthinkbuild.com

Created attachment 442673

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

Screenshot of overflow issue caused when Safari miscalculates the min() function

Working with a CSS Grid, the contents of the grid overflow from the parent, but it's not due to the typical grid overflow issue where setting each child's min-width/width/width properties forces the correct sizing.

Instead, the issue actually appears to be with the computation of the `min()` function and the conversion of different units, namely % and vw.

>From my cross-browser testing, it appears this issue only affects Safari/WebKit. To reproduce the issue, follow these steps:

1. Visit https://www.petsupermarket.com/holiday-shop-toys-treats-gifts
2. Using the inspector, find the element matching selector `section#shop-holiday-by-pet`
3. Attached to that element, you'll find the styles `width: 100vw; max-width: 100%;`. That is a partial and temporary fix I added which appears to get Safari to render 90%+ correctly in most cases, with minimal overflow, though other browsers still have no overflow. That section, in particular, is supposed to extend past the viewport edge with and allow the end-user to scroll left and right in that section similar to how they would when interacting with a feature such as Instagram stories or Twitter Spaces/Fleets(legacy), but in this case, the element actual blows of the full document's width, causing the page to overflow and other elements to extend past the viewport edge as well.
4. Resize viewport width to a mobile size, (e.g. 400px).
5. Observe the minimal overflow.
6. Replace `width: 100vw; max-width: 100%;` for the desired style `width: min(100%, 100vw);`.
7. Observe how switching the style actually causes the section to grow in width, though using the `min()` function should always return the lowest value from a set of values, wherein this case, it actually returns the larger of the two, thereby growing the area.

-- 
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/20211028/1a74fea8/attachment.htm>