[Webkit-unassigned] [Bug 280961] New: clip-path and negative margin do not work together nicely

[bugzilla-daemon at webkit.org]

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

            Bug ID: 280961
           Summary: clip-path and negative margin do not work together
                    nicely
           Product: WebKit
           Version: Safari 18
          Hardware: Mac (Apple Silicon)
                OS: macOS 15
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: albi at alexanderalbrecht.de
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Using clip-path and negative margin-block-end creates weird behavior. Let me explain the situation:

The site I am talking of is https://spettacolo-brunnen.ch

There are a lot of DIVs with a class starting with "mod-", all of them are childs of main. Those DIVs (despite the first one) have a clip-path: polygon() that creates a slanted angle at the top. But for not having gaps and having a nice overlap, I have to pull the margin-block-end a few negative pixels to the top.

When I do load the site, everything is seems to be okay, but when I resize the site over a threshold around 2030-2050 pixels width, the angle goes away, seems the clip-path is not working anymore. This behavior can be seen if you downscale or upscale the browser window over that threshold. When I reload the site, the slanted angle is back.

Getting rid of that negative margin-block-end, the issue is completely gone. But I need that margin for the overlap.

Testing that on Chrome/Firefox, the issue can not be seen.

-- 
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/20241007/987bb9fc/attachment-0001.htm>