How to declare css fallback from max(env(safe-area-inset-bottom))

Question

I have this bit of css:

  transform: translateY(50px);
  transform: translateY(max(50px, env(safe-area-inset-bottom)));

My expectation is that browsers that do not support max(), would fall back to transform: translateY(50px)

However, that doesn't seem to be the case with neither Chrome nor Firefox.

https://jsbin.com/xozexin/7/edit?html,css,output

Answer 1

This is not really how CSS Fallbacks work. Take the following snippet for example :

.some-selector {
    width: 200px;
    width: max(50px , 200px);
}

Because max is not a valid CSS function (not supported by the browser), browsers don’t change and replace the width value but keep the 200px value for the width property.

In your case translateY is a valid function but you just passed invalid value.

As an alternative you can use CSS @supports

div {
  width:250px;
  height:200px;
  background: green;
  transform: translateY(50px);
}


@supports (width: max(5px,5px)) {
   div {
     transform: translateY(max(50px, env(safe-area-inset-bottom))) !important;
   }
}

I have tested with JavaScript

console.log(CSS.supports("width", "max(5px,10px)"))
console.log(CSS.supports("transform","translateY(max(50px, env(safe-area-inset-bottom)))"))