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]

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