Question: Does a plugin exists to simulate safe-area-inset margins ?

[Aarbel]

Does a plugin exists to simulate safe-area-inset margins with storybook ?

Typicaly for tablets or mobile devices.

Goal

Don't waste time testing on the devices, but test directly in storybook

Thanks a lot for your help !

[Aarbel]

Maybe a great enhancement for viewport addon

[shilman]

PRs welcome for addon-viewport!

[Aarbel]

@shilman i can do it, but i don't know if we can force safe-area-inset env variables in an iframe, do you have some documentation about it ?

[Aarbel]

@shilman

Just tried with:

document.documentElement.style.setProperty("safe-area-inset-top","20px");

But it doesn't work:

document.documentElement.style.getPropertyValue("safe-area-inset-top"); //=> returns ""

Safe-area-inset variables are set by user agent and doesn't seem editable. Is there a way to hack it ?

Thanks a lot for your help !

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Aarbel]

@shilman ?

[Aarbel]

@shilman up ;)

[shilman]

Sorry, I don't know the answer 🤷

[Aarbel]

Cf https://discourse.mozilla.org/t/question-is-there-a-way-to-override-css-native-env-variable-like-safe-area-inset-top/79675

[Aarbel]

Cf https://stackoverflow.com/questions/56499416/setting-css-env-variables-programmatically-using-javascript

@jantimon maybe you can help on this ?

[shilman]

@MichaelArestad @yannbf Is this something either of you know about?

[MichaelArestad]

@shilman I am unfamiliar with any addons that might do this. I suspect more research needs to be done before building it. Does the size of the inset areas change per device? What would we need to do in the code to replicate the behavior of an active inset area?

[yannbf]

I'm not even sure if it is possible to simulate these variables 🤔

[Aarbel]

The recent notch with new Macbooks laptops may accelerate this topic

[MichaelArestad]

@Aarbel That's exactly what got me thinking about the differences in inset behavior per device. 🤔

[Aarbel]

I'm not even sure if it is possible to simulate these variables 🤔

Yes not sure, the alternative at the moment is to write something like, but that may not be supported by most styles of apps.

.storybook-iframe {
    --storybook-safe-area-inset-top: 32px;
}

:root {
    --safe-area-inset-top: env(safe-area-inset-top,  --storybook-safe-area-inset-top);
}

.myclass {
    padding-top: var(--safe-area-inset-top);
}

Cf https://github.com/w3c/csswg-drafts/issues/2627 and https://discourse.mozilla.org/t/question-is-there-a-way-to-override-css-native-env-variable-like-safe-area-inset-top/79675/7 MDN discussion

[MichaelArestad]

Right, but I'm not sure that would work unless viewing the iframe itself. Otherwise, I think the iframe is likely too far away from the edge of the screen for safe-area-inset to work. I think we would have to do some heavy lifting to simulate it.

[Aarbel]

After testing, env() fallback doesn't seem to work well on most browsers, because they actually set the env variable as "0px" that means the value exists.

Something like that works better:

.storybook-iframe {
    --storybook-safe-area-inset-top: 32px;
}

:root {
    --safe-area-inset-top: max(env(safe-area-inset-top) , var(--storybook-safe-area-inset-top));
}

.myclass {
    padding-top: var(--safe-area-inset-top);
}

[Aarbel]

Right, but I'm not sure that would work unless viewing the iframe itself. Otherwise, I think the iframe is likely too far away from the edge of the screen for safe-area-inset to work. I think we would have to do some heavy lifting to simulate it.

Didn't really get your point sorry

[Aarbel]

Do anyone have some news / insights about this here ?

@shilman ?

[Aarbel]

Looks like recently Swift provides a function to modify the safe area inset, but we can't wait to have it in chrome and standard web apis. https://www.hackingwithswift.com/quick-start/swiftui/how-to-inset-the-safe-area-with-custom-content

[Aarbel]

cf https://developer.chrome.com/docs/devtools/progressive-web-apps

Looks like we can be helped by @sofiayem and @kaycebasques

[Aarbel]

cf https://issues.chromium.org/issues/40718410

Can you upvote this ticket ?

[Aarbel]

Capgo recently released this chrome plugin that can be very helpful in the short term: https://chromewebstore.google.com/detail/capacitor-safe-area-simul/ddaaodgcccedhjbjeollookhompnlfhi