Bug 310239
| Summary: | Top-level boxes anchored to sticky should stick | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | fantasai <fantasai.bugs> |
| Component: | Layout and Rendering | Assignee: | fantasai <fantasai.bugs> |
| Status: | NEW | ||
| Severity: | Normal | CC: | bfulgham, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Local Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| Bug Depends on: | |||
| Bug Blocks: | 291856 | ||
fantasai
Testcase: https://knowler.dev/demos/Ats2b5t?codepen
<div id="sticky">Sticky
<div id="anchor">Anchor</div>
<div id="anchored" popover="auto">Anchored</div>
</div>
<div id="content"></div>
<script>
anchored.showPopover();
</script>
<style>
#sticky {
position: sticky;
inset-block-start: 0;
}
#anchor {
anchor-name: --anchor;
}
#anchored {
position-anchor: --anchor;
position-area: block-end span-inline-start;
margin-block-start: 8px;
}
/* Presentation-only */
:root {
color-scheme: dark;
font-family: system-ui;
background-image: linear-gradient(to bottom, RoyalBlue, MediumSeaGreen);
}
body {
margin: 0;
}
#sticky {
display: flex;
justify-content: space-between;
padding: 16px;
background-color: DeepPink;
font-weight: 600;
}
#content {
block-size: 2000px;
}
</style>
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/172884148>