[Webkit-unassigned] [Bug 245496] Percentage (%)-based heights for absolute-positioned children not respecting sticky parent height

[bugzilla-daemon at webkit.org]

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

--- Comment #8 from Karl Dubost <karlcow at apple.com> ---
Created attachment 464621

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

safari vs chrome with outline

So interesting trying to reduce the test case. This will be hard because the layout is quite over-done, mixing pseudo-selector, position absolute and sticky and flex and grid and reset css, and other things. All of that inside an iframe. 

At least the iframe by itself has no impact on the layout. Also both firefox and safari have issues, so it could be that chrome has a bug and the layout benefits of this bug. 

Putting an outline helps to see what is happening with the boxes. 
we can see that on both side the rounded corners are not visible because something is hiding the edge on both sides. 

That could be because of ::before, ::after style.

For example could the clip path be one of the issues.

```
.before\:\[clip-path\:polygon\(0\%_1px\,0\%_100\%\,0\.5rem_100\%\,0\.5rem_1px\,calc\(100\%_-_0\.5rem\)_1px\,calc\(100\%_-_0\.5rem\)_100\%\,100\%_100\%\,100\%_1px\)\]::before {
    content: var(--tw-content);
    -webkit-clip-path: polygon(0% 1px,0% 100%,0.5rem 100%,0.5rem 1px,calc(100% - 0.5rem) 1px,calc(100% - 0.5rem) 100%,100% 100%,100% 1px);
    clip-path: polygon(0% 1px,0% 100%,0.5rem 100%,0.5rem 1px,calc(100% - 0.5rem) 1px,calc(100% - 0.5rem) 100%,100% 100%,100% 1px);
}
```

If I change the clip-path to be 

```
.before\:\[clip-path\:polygon\(0\%_1px\,0\%_100\%\,0\.5rem_100\%\,0\.5rem_1px\,calc\(100\%_-_0\.5rem\)_1px\,calc\(100\%_-_0\.5rem\)_100\%\,100\%_100\%\,100\%_1px\)\]::before {
    content: var(--tw-content);
    clip-path: polygon(0% 1px,0% 100%,0.5rem 100%,0.5rem 1px,100% 1px,100% 100%,100% 100%,100% 1px);
}
```

aka removing the calc to be 100% I suddenly get the full box on the right side.


PS:
the 3 vertical dots SVG inside the button element would benefit from a `height: 100%`

-- 
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/20230124/040e4b03/attachment-0001.htm>