[css-env] safe-area-insets-* for embedded document by iframe
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 20/100
Research direction
Start with the issue's parent and child iframe examples, then compare the reported Chrome and Safari behavior for safe-area-insets-* in embedded documents. Read the relevant CSS environment-variable and viewport specifications to determine whether the behavior is defined; done means reaching a standards consensus and recording the expected iframe behavior.
Written by the indexing model from the issue text.
Description
safe-area-insets-* is the defines for visible rectangle such as cutout support. But I guess that it is unclear for embedded document by iframe.
- Chrome seems to be 0 in embedded (child) document by
iframe. - Safari seem be same value for parent document and embedded (child) document.
What correct behaviour for embedded document?
parent
...
<meta name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<style>
body {
padding: 10px;
margin: 0px;
}
iframe {
padding: 0px;
margin: 0px;
border: none;
}
</style>
<iframe width="100%" height="100%" src="child.html"></iframe>
...
child / embedded document
...
<style>
#content {
padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left);
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
</style>
<div id="content">
...
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- Avg merge
- 2d 18h
- Merged PRs (30d)
- 24
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.
More from w3c/csswg-drafts
-
Agenda+ css-sizing-4 css-values-5
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
w3c/csswg-drafts#14502 · 1 reaction ·
-
css-values-5 editorial Needs Edits
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
w3c/csswg-drafts#14498 · 2 comments ·
-
css-overflow-4 topic: line-clamp
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
w3c/csswg-drafts#14485 · 1 comment ·
-
Administrative Tracker css-values-4
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
w3c/csswg-drafts#14482 · 4 comments · 1 reaction ·
-
css-values-5 Needs Edits
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
w3c/csswg-drafts#14466 ·
All issues in w3c/csswg-drafts
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
tvOS
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
bvaughn/react-resizable-panels#751 · 1 comment ·
-
www.wiwo.de OpenN: AdGuard Browser Extension P3: Medium T: Annoyance
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
AdguardTeam/AdguardFilters#242026 ·
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 92/100