Utility with Duplicate / Fallback Properties

[aj-foster]

Hello there 👋🏼

I'm working on an application that uses 100vh as the height of several elements. Unfortunately this can cause issues on iOS, and one possible solution is to use -webkit-fill-available. (There are other solutions that may work better in other circumstances, but this is best for my use-case.)

Of course, not every browser understands -webkit-fill-available, so 100vh is an appropriate fallback value. To help encode this, I hoped to create a utility:

@layer utilities {
  .h-available {
    height: 100%;
    height: 100vh;
    height: -webkit-fill-available;
  }
}

Unfortunately, due to the collapsing of duplicate properties, the output utility has only the last value:

.h-available {
  height: -webkit-fill-available;
}

This is a valuable optimization in general, but it nullifies the fallback behavior I was hoping for.

So, is there a more idiomatic approach to accomplishing this behavior?

[aj-foster]

As a workaround, I'm using the following:

@layer utilities {
  .h-available, .override-shim-1 {
    height: 100%;
  }

  .h-available, .override-shim-2 {
    height: 100vh;
  }
  
  .h-available {
    height: 100%;
    height: 100vh;
    height: -webkit-fill-available;
  }
}

This creates the desired behavior, cascading along separate rules rather than duplicated properties. However, it is non-obvious for someone who might come along later.

[alexanderbluhm]

You can try to use @supports (-webkit-touch-callout: none) media query as described here.

[aj-foster]

That's a great way to handle this, thank you.

[adamwathan]

Good catch, we shouldn't dedupe properties that could be fallbacks, will fix that 👍🏻

For your specific scenario, you might want to look at this PostCSS plugin:

https://github.com/postcss/postcss-100vh-fix

[aj-foster]

Totally understand the goal of the deduplication, and recognize that my use-case is uncommon. I like the plugin's way of handling this situation; thank you.

[adamwathan]

This should be fixed in 3.0.9 btw 👍🏻