[cssom] Sticky position percentage values for inset properties.
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
Consider the test-case:
<!doctype html>
<div id="log"></div>
<div style="height: 500px; background: purple; overflow: hidden;">
<div style="height: 400px; background: yellow;">
<div id="target" style="height: 100px; position: -webkit-sticky; position: sticky; left: 0; top: 50%; background: blue;">
</div>
</div>
</div>
<script>
log.innerHTML = getComputedStyle(target).top;
</script>
Every browser resolves the percentage during layout relative to the overflow: hidden container (that is, the closest scrollable box), so #target is positioned 250px from the top.
However, every browser except Gecko resolves the percentage in getComputedStyle against the containing block (the yellow box), returning 200px instead.
I think I should file bugs against the other browsers and clarify the spec because those percentages make no sense, but I'm not sure if I'm missing something...
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the HTML testcase and its getComputedStyle(target).top result, then compare the reported layout behavior in Gecko and other browsers. Read the relevant CSSOM and sticky-positioning specification text; done means the percentage-resolution behavior and the required specification change are agreed and documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100