[Webkit-unassigned] [Bug 188252] New: Flexbox auto width flex container wraps when not necessary

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Wed Aug 1 23:18:53 PDT 2018


            Bug ID: 188252
           Summary: Flexbox auto width flex container wraps when not
           Product: WebKit
           Version: Safari 11
          Hardware: Unspecified
                OS: macOS 10.13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: roland at nextendweb.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

I have a complicated flexbox layout where menu items are columns and aligned to the right in an auto width flexbox container. Also This container allow the items to wrap when there is not enough width available.

You can check the issue here: https://smartslider3.com/bugs/webkit/flexwrap/
Safari 11.1.2 and Tech preview Release 61 (Safari 12.0, WebKit 13606.1.25.1): https://i.imgur.com/xnrQyGE.png
Chrome and other browsers: https://i.imgur.com/bDVDk7j.png

I tried to compose the issue in JSFiddle, but I have no luck, it seems fine in Safari too: http://jsfiddle.net/j3Lau0td/1/

I think the issue is somehow related to value rounding. 
In the original example if you check .n2-ss-layer-row-inner element, which has the following CSS:
width: calc(100% + 30px);
margin: -15px;

You just need to change that to and it seems OK in Safari too.
width: calc(100% + 31px);
margin: -15px;

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/20180802/c5a4ce4a/attachment.html>

More information about the webkit-unassigned mailing list