Adeus a seus problemas com 100vh no IOS

Se você e desenvolvedor front-end a um tempo deve saber que esse problema e algo que acaba com algumas noites de sono, MASS calma... te prometo que até o final desse artigo irei te dar uma solução incrível para esse problema.

O CSS esta trazendo novos 3 propriedades para a definição dos seus height's. Essas propriedades são as dvh, lvh e svh. Essas propriedades ainda não são suportadas por todos os navegadores, porém também vou ter uma solução top nesse artigo para resolver os problemas de navegadores que não suporta.

Vamos começar explicando a propriedade vh que já e estável e praticamente todos os navegadores e usada diariamente por todos os devs front-end. Em resumo ela pega o tamanho máximo do campo visível do usuário:

Como essa propriedade já e bem estável, falarei pouco dela.

Essa nova implementação do CSS trouxeram 3 novas propriedades apontando 3 problemas diferentes, vamos entender eles:

svh => Small viewport height

Para explicar melhor cada propriedade estaria explicando o conceito sempre aplicando 100% de cada uma dela, por exemplo o svh => 100svh

Essa propriedade pega o 1% da altura da área visível quando os controles estão visíveis, ou seja, ela pega 100% do tamanho da área visível quando os controles estão em tela:

Fazendo com que o controle visível ou não, não interfira no tamanho da sua view height.

lvh => Large viewport height

Essa propriedade parece bastante com a anterior, porem essa pega 1% da altura da área visível quando os controles estão ocultos:

Então o controle visível ou não, o tamanho dele será sempre relativo ao tamanho da viewport quando o controle está oculto.

dvh => Dynamic viewport height

Chegamos no pulo do gato, essa propriedade ela se comporta conforme com o controle fica visível ou oculto, ela consegue aumentar ou diminuir segundo o usuário interage com sua aplicação. Fazendo com que o controle do IOS não interfira na sua linda imagem ou componente que ocupa 100vh (que no caso ficaria 100dvh hahah):

Porém, como falei no começo do artigo, essa propriedade não e suportada por todos os navegadores atualmente. Você pode conferir no site caniuse.

Nesse momento quero falar de outra propriedade presente no CSS que pode ajudar nesse caso. Mas não se engane, essa propriedade que estarei mostrando não serve apenas para esse caso dos views height, ela funciona com todas as propriedades possíveis no CSS.

@supports => at rules

Essa propriedade funciona chamando ela como se fosse uma @media, @print ou @keyframes. Necessário realizar a chamada da mesma, e colocar a propriedade a ser verificada se o navegador suporta:

@supports (display: flex) {
    .flex-container > * {
        text-shadow: 0 0 2px blue;
        float: none;
    }

    .flex-container {
        display: flex;
    }
}

Possível colocar todo tipo de comportamento caso a regra seja suportada no navegador do cliente. Aqui vai um exemplo de como utilizar o dvh

  height: 100vh;
 
  // Caso seja suportado height: 100dvh, ele usará o mesmo
  @supports (height: 100dvh) {
    height: 100dvh;
  }