- From: Makoto Kato via GitHub <sysbot+gh@w3.org>
- Date: Tue, 14 Jan 2020 01:54:33 +0000
- To: public-css-archive@w3.org
makotokato has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-env] safe-area-insets-* for embedded document by iframe ==
`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">
...
```
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4670 using your GitHub account
Received on Tuesday, 14 January 2020 01:54:35 UTC