Kevin Powell - Community•10mo ago

Fallbacks for svh units on older iOS devices?

Hi there I'm testing my CSS on older iOS devices as our site gets most of our visitors from iPhones and I'm running into an issue where they seem to think they can use svh but the result is always zero, and so any CSS rules using them won't fall back to any other rule, they'll just give the wrong value. First I tried...

  .region-header{
    min-height: 100vh;
    min-height: 100svh;
}

  .region-header{
    min-height: 100vh;
    min-height: 100svh;
}

And it failed to fall back. Then I tried...

  .region-header{
    --_svh: 1vh;

    @supports (min-height: 100svh) {
      --_svh: 1svh;
      border: 1px solid red;
    }
    
    min-height: calc(100 * var(--_svh));
}

  .region-header{
    --_svh: 1vh;

    @supports (min-height: 100svh) {
      --_svh: 1svh;
      border: 1px solid red;
    }
    
    min-height: calc(100 * var(--_svh));
}

That also failed, as the device passed the @supports query and produced a red border despite no success Likewise this failed

.region-header{
  min-height: 100vh;
}

@supports (min-height: 100svh) {
  .region-header{
    min-height: 100svh;
    border: 1px solid green;
  }  
}

.region-header{
  min-height: 100vh;
}

@supports (min-height: 100svh) {
  .region-header{
    min-height: 100svh;
    border: 1px solid green;
  }  
}

Again the green border showed, but the rule failed, and didn't fallback. Any ideas?

8 Replies

b1mind•10mo ago

100% trick html, body { height: 100%} then pass it down.

b1mind•10mo ago

https://codepen.io/b1mind/pen/PojdyQz

Brent Morton

CodePen

Pushed footers Flex / Grid

...

b1mind•10mo ago

Also not sure what you mean failed to fallback...

  .region-header{
    min-height: 100vh;
    min-height: 100svh;
}

  .region-header{
    min-height: 100vh;
    min-height: 100svh;
}

If svh is not supported it will just be ignored. Unless its a bad selector this is how all CSS works. A unsupported selector in a declaration will nuke the whole declaration.

JacordOP•10mo ago

By failing to fallback I mean that (it seems) the declaration is not being ignored... if it were ignored min-height: 100vh would be used instead right? I would like 100vh to be used when 100svh is not supported, but can't seem to find a way to make it happen. Instead it's behaving as if any value containing svh is a valid declaration of unset/zero/initial. That, of course scuppered my next attempt which was to create a variable like this...

--_svh: min(1vh, max(1svh, 2vh - 100svh))

--_svh: min(1vh, max(1svh, 2vh - 100svh))

... which would have worked if 1svh was being interpreted as zero. Sadly not. I even tried this, I thought I might have cracked it, but noooo:

    --_svh: var(--made-to-fail, 1svh, 1vh); 
    min-height: calc(100 * var(--_svh));

    --_svh: var(--made-to-fail, 1svh, 1vh); 
    min-height: calc(100 * var(--_svh));

(I'm going to try the 100% thing next)

b1mind•10mo ago

Yea I'd have to see your layout to understand for one WHY and more so how you are doing things. chasing the 100% fill of viewports is a troublesome issue xD and really relies on having a intrinsic layout 🤔 height is honestly one those things that #depends what you want but you should just let things be free and let your content determine height.

JacordOP•10mo ago

Usually I'd agree, but this is one of those "slideshow" type things... if worst comes to worst I can just stop trying to use svh at all. By the way using 100vh works absolutely fine except for the overflow on smartphones. Does the 100% method you shared work more like 100vh or 100svh in the end?

b1mind•10mo ago

for the most part it works different than either you will just have to test. It can have some the behavior of 100vh as far as shifting content when the bars come and go* You might look into vmin/vmax inside media queries too like vmin for landscape/desktop* and vmax for mobile or just use svh with vh fallback on desktop and only us vmax for mobile in portrait*

JacordOP•10mo ago

Thanks, I already have a different solution from vmax/vmin. The 100% thing is interesting but in my case it caused other issues with my layout. To be honest I was very happy with how svh was working on every other device so, given that fallbacks aren't working, I think I will use media queries to target specific devices which are most likely to have the problem. Namely those iPhones which aren't able to update past iOS 15. I think most other older devices/OSs out there can run browsers which are easily updated to 2022 levels when svh was introduced. I'll have to test further whether other devices/browsers will fallback to previous declarations as expected. I am crossing my fingers that they do. Here's where I've landed anyway:

html{
  --svh: 1vh;
  --svh: 1svh;
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2),
         only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3){
    --svh: 1vh;
}

.region-header{
    min-height: calc(100 * var(--svh));
}

html{
  --svh: 1vh;
  --svh: 1svh;
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2),
         only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3){
    --svh: 1vh;
}

.region-header{
    min-height: calc(100 * var(--svh));
}

Gaming

Programming

Fallbacks for svh units on older iOS devices?