Bug 280961 – clip-path and negative margin do not work together nicely

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Alexander Albrecht]

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.

[Radar WebKit Bug Importer]

<rdar://problem/137863317>

[Simon Fraser (smfr)]

I wasn't able to reproduce a bad rendering in Safari on https://spettacolo-brunnen.ch/, in a wide window.

Alexander, could you make a simple page that shows the issue?

[Simon Fraser (smfr)]

Also, please test in a recent Safari Tech Preview to see if we've fixed this.

[Alexander Albrecht]

Hi Simon,

I did a stripped down version of the page. I removed most of the clutter, fonts and stylings to be sure there is no interference with it. And it seems the problem still exists, even with the latest Safari Tech Preview, while other browsers like Chrome or Firefox do not show the same behavior.

It still removes or straigthens the clip-path (aka angles) when the browser windows width is dragged over and under the threshold of around 2030-2050 px. Maybe this has something to do with my high res Apple Studio Display? But I do not have a setup to test this on lower res displays.

The stripped down version can be found under: https://alexanderalbrecht.ch/spettacolo-bug/

In the stylesheet from line 69 on until the end you could find the classes that are responsible for the angles. On line 16 is the negative margin. As soon as it pulls the next div upwards (a negative number) the error is present. If you disable lines 16 to 18 the error is gone. You could only it on overlapping DIVs (so ignore the top angle on the DIV that contains the video).

Let me know if I could give you further details.

Alex

[Simon Fraser (smfr)]

The page layout looks the same between Safari and Firefox; Chrome's rendering is different (the "Strassenkünstlerfestival" section looks taller). Is that what you see?

[Alexander Albrecht]

Do you see the angles (horizontal) between the containers that begin with "mod-"? If so, please make sure to resize Safari above or below the threshold of 2030–2050 px viewport width, depends where you come from size-wise. Those angles go away. They are done with a clip-path, and all divs that start with "mod-" are pulled 100px to the top, for getting a nice overlap. If the overlap is disabled, the clip-path will stay visible all the time. But with the negative margin that creates the overlap Safari has some problems.

My version is totally stripped down. No additional fonts, no javascript etc. Just a few styles.

[Alexander Albrecht]

By the way, is there a possibility to upload a screen capture video? Or I will host it by myself.

[Simon Fraser (smfr)]

I think this may be the issue fixed in bug 282106. Can you test in a recent Safari Tech Preview?

[Alexander Albrecht]

Yessss. Latest Technology Preview fixes it. My last check several weeks ago did not solve it. So the issue could be closed.

[Simon Fraser (smfr)]

Excellent.

*** This bug has been marked as a duplicate of bug 282106 ***