Problema no HTML para Mobile, com relação ao height do site

Situação: Venho fazendo um mini-projeto html, e resolvi aplicar o efeito parallax no site aplicando um background-attachment: fixed; em certas imagens.

meu projeto no github

Problema: No mobile, há sempre a barra de configuração que se oculta quando rolamos o site para baixo e aparece quando rolamos para cima, fazendo com que o height mude constantemente.
image
Acontece que, visto que as imagens contém um efeito background-size: cover;, seu tamanho se adapta de acordo com o height.

Ou seja, toda vez que as imagens se refazem em relação ao height que também muda, há um desconforto que não deveria acontecer.

Para visualizar o problema basta abrir o meu projeto em um celular e rolar a tela sobre as imagens.

Obs: Realmente eu gostaria de saber se há uma solução em puro CSS para isso, talvez uma forma de manter o height do body fixo ignorando a barra de configurações que aparece e desaparece, preferível que não precise usar Js…

Desculpa se for muito simplista, mas será que se limitar o height de alguma forma diferente ajudaria nisso?
Em vez de se adaptar ao height total da tela (o que fica mudando quando aparece/desaparece a barra de buttons do android), as imagens obedecerem ao height: 100vh;, por exemplo, ou height: 100%;
Não sei se faz a diferença necessária, mas estou puxando esse lado pq é o que eu penso sobre o problema, eu testaria formas variadas assim

Pois é, já testei isso e não muda, por que mesmo dessa forma não resolveria, se a barra de configurações se oculta o height muda, digamos que o height 100% de um celular seja 800px, caso a barra se oculte esse 100% sobe pra 820px por exemplo… voltando assim no problema do começo.

Já tinha pesquisado muito sobre, e cheguei a conclusão de que não vale a pena usar efeito parallax no mobile, pois o desempenho do site é muito ruim, não chega a 60fps, tanto é que procurei sites de grandes empresas que usam esse efeito, e sempre eles colocavam o efeito para computador, mas para celular não era usado…

Acredito que media-queries ou outro método aplique e desaplique a opção para cada dispositivo, estou estudando isso ainda, mas vlw aí…

Hum, isso é verdade, pesa demais no site, infelizmente…
É um efeito tão bonito cara, que pena q seja assim

Bom, vc falou sobre os media-queries, acredito que possa ser o jeito
Digamos que ele obedeça a cada resolução que você colocar…
A mudança dos px na altura nao seria suficiente para fazer a troca (claro vc fazendo pensando nisso)
E então permaneceria o mesmo…

Só vem o rolê de fazer todas as resoluções e tal, é algo que real dá um trampo, mas é uma alternativa
Tmj!

1 curtida