Bug 249457 - Outline on container with negative z-index child is drawn both outside container and in the scrolling content.
Summary: Outline on container with negative z-index child is drawn both outside contai...
Status: ASSIGNED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Apple Silicon) macOS 13
: P2 Normal
Assignee: Simon Fraser (smfr)
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-12-16 00:37 PST by Johannes Odland
Modified: 2022-12-30 22:38 PST (History)
2 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
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