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 9 · 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 2 · Answer 2 · answered Jun 12 '20 at 16:10

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

answered Jun 12 '20 at 16:10

Haim Lankry

839
6
4

score 0 · Answer 3 · answered Jan 15 '18 at 21:31

0

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

434
4
13

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)

3 Answers3