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.

Germainegerman

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. – Incarcerate

Answer 1

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);
  }
}

Morphophoneme

Answer 2

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);

Witting

Answer 3

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);

Occupation

Answer 4

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));

Kamp

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)); – Kamp