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

Description Johannes Odland 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.
Comment 1 Radar WebKit Bug Importer 2022-12-23 00:38:16 PST 
<rdar://problem/103663858>
Comment 2 Simon Fraser (smfr) 2022-12-30 22:30:18 PST 
The bug is actually caused by the `z-index: -1`.
Comment 3 Simon Fraser (smfr) 2022-12-30 22:38:09 PST 
Pull request: https://github.com/WebKit/WebKit/pull/8111