.modal-open não travando o scroll no iOS / fixed faz o modal fazer um jump pro topo do site

[igorthurow]

Fala galera!

Eu tô usando a class .modal-open do Bootstrap 4 {overflow:hidden}; pra travar o overflow da página do meu site, tanto quando abre o modal quanto quando abre o menu.

O problema é no iOS (acredito que somente com o Safari), aparentemente o overflow:hidden não funciona corretamente no iOS, e então pesquisando eu consegui resolver em partes:

Defini modal-open para {position: fixed; overflow: hidden; width: 100%;}, e defini para ser adicionada ao body e ao HTML quando eu chamar o menu ou o modal, tanto html quanto o body já estão default com height 100%.

Funciona! Aparentemente travou o scroll no iOS, ou seja, funcionou para a finalidade que eu estava buscando, o site não scrolla mais enquanto o menu ou o modal estiverem abertos.

Só que gerou outro problema: Quando eu abro o modal, ou o menu e a class .modal-open{position: fixed} é aplicada no body e no html, o site faz um jump pro topo do site. Tanto mobile quanto desktop.

Foi a única maneira que encontrei de travar o scroll no iOS mas me resultou no problema de pular pro topo em todas outras plataformas e navegadores.

E o pior: Eu não tenho device iOS pra debugar, alguém pode me ajudar?

Além disso aparentemente a imagem do BG também tá bugada no iOS, mas isso eu ainda não tentei resolver, vou ver no próximo capítulo :)

Site: http://www.igorthurow.me (no momento apresentando o erro de pular para o topo ao clicar no modal ou no menu, para que possa ser visualizado o problema e facilite a correção

Meu menu JS:

  $('.cd-menu-trigger').on('click', function(event){
    event.preventDefault();
    $('#main-nav').addClass('is-visible');
    $('.cd-shadow-layer').addClass('is-visible');
    $('.cd-close-menu').removeClass('cd-hidden-menu');
    $('body').addClass('modal-open');
    $('html').addClass('modal-open');
  });
  //close menu
  $('.cd-close-menu').on('click', function(event){
    event.preventDefault();
    $('#main-nav').removeClass('is-visible');
    $('.cd-shadow-layer').removeClass('is-visible');
    $('#menu-icon-scroll').removeClass('open');
    $('body').removeClass('modal-open');
    $('html').removeClass('modal-open');

  });

CSS: `.modal-open {
  position: fixed;
  width: 100%;
}

html, body {
  height: 100%;
}

Obrigado!!! Espero que tenham entendido a questão.

[WandersonAlves]

Em resumo o position: fixed no webkit é totalmente "bugado".

Ele realmente vai dar scroll no seu elemento fixed de forma estranha.
Tive esse problema enquanto fazia uma aplicação cordova e a solução foi tirar o overflow do body e criar a area util com tamanho pré definido. Como no meu caso o elemento fixo tinha que ficar no final da tela, bastou por um height: calc(100vh - 100px), overflow: scroll (100px foi um exemplo) e colocar o elemento logo abaixo dessa div que o conteudo acima ficou com scroll normal e o elemento abaixo ficou "fixo".

Tenta evitar usar fixed, se possivel, usa absolute. E se possivel também, remove o overflow do body, html e cria essas pequenas áreas caso precise de outros elementos fixos

[WandersonAlves]

body { margin: 0px; overflow:hidden; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }

.scrollContent { overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: fixed; }

.scrollWithToolbar { height: calc(100vh - 56px); @extend .scrollContent }

Por exemplo

[igorthurow]

Cara, muito obrigado @WandersonAlves !! Vou tentar implementar conforme tua dica, pesquisando sobre inclusive. Eu sou iniciante na área, então seria excelente saber a solução de um problema tão simples quanto este, de conseguir travar o scroll ao abrir um modal no iOS, falando assim parece ser tão simples, não? É foda hahahaaha

[felipefialho]

Tente usar position sticky. Existem alguns bugs no com position fixed no Safari.

[igorthurow]

Obrigado @lfeh !!

Senhores, aparentemente meu problema está em colocar:

html, body { overflow: hidden, height: 100%; }

Assim eu faço o overflow vertical do Safari travar e resolvo meu problema, se eu coloco essa regra só no body, ele não trava.
Porém, ao adicionar overflow:hidden combinado com o height:100%, eu tenho um jump pro topo da tela.

Eu até encontrei outras pessoas relatando problema parecido, como: aqui e aqui, mas ainda não tive sucesso em corrigir o problema.

Pelo que compreendi, estão falando para não usar o overflow: hidden no HTML, e sim criar um wrapper envolvendo todo meu código e então aplicar a ele as regras.

Vou tentar... Se alguém mais tiver alguma ideia de como me ajudar. Obrigado!

[kurybr]

@igorthurow Cara, eu tava com esse mesmo problema, aparentemente essa solução do

html, body { overflow: hidden, height: 100%; }

Funcionou para mim.

[igorthurow]

Boa! O meu ainda tá com problema, deve estar conflitante com alguma coisa, preciso corrigir ainda. Que saco haha

[naeliofreires]

Minha solução temporária foi pegar a altura do scroll quando o modal for aberto e atualizar o da página com esse valor, quando o modal for fechado, tenho conhecimento que não é tão elegante mas é enquanto acho a solução.

[kvnol]

Eu uso o Body Scroll Lock, salva vidas: https://github.com/willmcpo/body-scroll-lock

[igorthurow]

Eita @kvnol

Muito bom conhecer esse cara. Valeu por compartilhar conosco