Content inset safe area iOS Android notch issue fix

We all have faced this issue developing a cross-platform app using HTML, CSS.

Angular application can be solved by adding a class on opening a specific route.

So by default every page will have a safe area by adding safe-area class with following css.

.safe-area {
    margin-top: constant(safe-area-inset-top);
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
}

Add this to body tag in index.html file.

For the bottom section safe area we can use:

.safe-area-bottom {
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

Now if you dont need in some route:

constructor(
    ...,
    @Inject(DOCUMENT) private document: any,
    ...
  ) { }

Use ngOnit() to remove the safe area if you dont need in the page.

ngOnInit() {
    this.document.body.classList.remove('safe-area');
}

Now since remaining route need to use the class in body, we need to add it again.

ngOnDestroy() {
    this.document.body.classList.add('safe-area');
}

References:

1. https://developer.mozilla.org/en-US/docs/Web/CSS/env
2. https://stackoverflow.com/a/54179481/8153537