Bug 249457

Summary: Outline on container with negative z-index child is drawn both outside container and in the scrolling content.
Product: WebKit Reporter: Johannes Odland <johannes.odland>
Component: CSSAssignee: Simon Fraser (smfr) <simon.fraser>
Status: ASSIGNED    
Severity: Normal CC: simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac (Apple Silicon)   
OS: macOS 13   
See Also: https://bugs.webkit.org/show_bug.cgi?id=107618
Attachments:
Description Flags
Screenshot of container element where outline is drawn both outside container and in the scrolled container content. none

Johannes Odland
Reported 2022-12-16 00:37:07 PST
Created attachment 464069 [details] Screenshot of container element where outline is drawn both outside container and in the scrolled container content. Steps to reproduce: Create a container element with `overflow:auto`, `perspective: 100px` and an outline. Add content that forces the container to be a scroll container. Add a positioned element that is translated in the Z direction and has z-index. I.e. `transform: translateZ(-100px)` `z-index: -1`. Codepen here: https://codepen.io/johannesodland/pen/QWxeepe Expected result: Outline should be drawn right outside border edge of container.. Actual result: Outline is drawn outside border edge of the container, and in the content. See screenshot.
Attachments
Screenshot of container element where outline is drawn both outside container and in the scrolled container content. (24.14 KB, image/png)
2022-12-16 00:37 PST, Johannes Odland 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-12-23 00:38:16 PST
<rdar://problem/103663858>
Simon Fraser (smfr)
Comment 2 2022-12-30 22:30:18 PST
The bug is actually caused by the `z-index: -1`.
Simon Fraser (smfr)
Comment 3 2022-12-30 22:38:09 PST
Pull request: https://github.com/WebKit/WebKit/pull/8111
Simon Fraser (smfr)
Comment 4 2025-01-17 18:01:42 PST
Currently we try to paint the outline as part of the foreground phase, but when we have a negative z-index child and clipping, the foreground layer is too small, and inside the clipping layer, so the outline gets clipped out. We'll either need another layer, or a hack that paints it in the background phase.
Note You need to log in before you can comment on or make changes to this bug.