Using calc() with env(safe-area-inset)

Question

I am wanting to use env(safe-area-inset-bottom) to add margin-bottom to an element, but only when the device is an iPhone X. However, the margin added using env(safe-area-inset-bottom) does not add enough to my liking, and I wish to add an additional 34px to the bottom margin.

    margin-bottom: calc(env(safe-area-inset-bottom) + 34px);

The styling above does add the appropriate margin, however, when the device is not an iPhone X, the margin-bottom does not go back to 0px. This is because of calc(). Any suggestions? Thanks.

This is because non-iPhone X devices still support `env(safe-area-inset-bottom)`, they are just more than likely reporting it as zero. Then zero is being added to 34px. Which'll make the margin-bottom on non-iPhone X devices 34px. — Steve Schrab, Feb 04 '19 at 14:18

score 12 · Answer 1 · answered Jun 29 '18 at 09:09

You can wrap the calc in a @supports query like so:

.rule {
  margin-bottom: 34px;

  @supports (margin-bottom: env(safe-area-inset-bottom)) {
    margin-bottom: calc(env(safe-area-inset-bottom) + 34px);
  }
}

If you're using sass, you can write a helper mixin like so:

@mixin supports-safe-area-insets {
  @supports (padding-top: env(safe-area-inset-top)) {
    @content;
  }
}

Which you can use like this:

.rule {
  margin-bottom: 34px;

  @include supports-safe-area-insets {
    margin-bottom: calc(env(safe-area-inset-bottom) + 34px);
  }
}

score 5 · Answer 2 · answered Jun 12 '20 at 16:10

5

The env css function has a 2nd fallback param. https://developer.mozilla.org/en-US/docs/Web/CSS/env

env(safe-area-inset-bottom, fallback)

So you can do:

margin-bottom: calc(env(safe-area-inset-bottom, -34px ) + 34px);

answered Jun 12 '20 at 16:10

Haim Lankry

879
7
4

score 2 · Answer 3 · answered Oct 08 '21 at 09:46

It's a little late to answer however, for whoever stumbles upon this, my problem was that "safe-area-inset-bottom" is UA property and is case senstive.

from the link mentioned by @Haim Lankry

https://developer.mozilla.org/en-US/docs/Web/CSS/env()

padding: env(safe-area-inset-bottom, 50px); /* zero for all rectangular user agents */
padding: env(Safe-area-inset-bottom, 50px); /* 50px because UA properties are case sensitive */
padding: env(x, 50px 20px); /* as if padding: '50px 20px' were set because x is not a valid environment variable */
padding: env(x, 50px, 20px); /* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */

doing something like this should work (S is capital)

margin-bottom: env(Safe-area-inset-bottom, 80px);

score 1 · Answer 4 · answered Jan 15 '18 at 21:31

1

You could try multiplying 34px by env(safe-area-inset-bottom); so when the inset is 0 then it will be 0 + 34px * 0 = 0px

margin-bottom: calc(env(safe-area-inset-bottom) + 34px * env(safe-area-inset-bottom));

answered Jan 15 '18 at 21:31

ngood97

513
5
16

1

Also I'm not sure if this is an issue for you, but if you are having problems with the calc being an invalid input in other browsers you're going to want to use a fallback like: Line 1: margin-bottom: 0px; Line2: margin-bottom: calc(env(safe-area-inset-bottom) + 34px * env(safe-area-inset-bottom)); – ngood97 Jan 15 '18 at 21:44

Using calc() with env(safe-area-inset)

4 Answers4