position: fixed, em dispositivos mobile

[felipefialho]

Imagino que a maioria já teve esse problema.

O position: fixed é completamente ignorado em dispositivos mobile (na verdade, dispositivos touch), e se comporta como um elemento com position: absolute.

De tempos em tempos tenho essa questão para resolver em algum projeto, então vou compartilhar com vocês a resolução:

Adicione no HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

No CSS do elemento com problema (não esqueça do auto prefix):

backface-visibility hidden 

Já pode abrir sua cerveja pra comemorar :)

[manzettidenis]

Cara, te amo <3 considere aberta !

[Mateus-desig]

Eu amo ele mais ainda !

[andre-mendes]

Noossa, tava com esse problema semana passada :D bom saber desse esquema ae \o/

[felipefialho]

Acham uma boa escrever um artigo um pouco mais detalhado, com exemplos e tal, no meu site. Ou essa issue já é suficiente pra escalar?

[fdaciuk]

@lfeh escreve ❤️

[eduardojmatos]

@lfeh o grande problema é a usabilidade no user-scalable=no, que remove a possibilidade de zoom nos devices :(

[rogeralbinoi]

Realmente @eduardojmatos tbm fiquei meio assim do user-scalable=no :(

[felipefialho]

@eduardojmatos, também pensei nisso, mas em tese apenas o backface-visibility hidden resolve a boa parte dos casos.

Porém ainda temos problemas com scroll + zoom em alguns dispositivos, e aí não tem jeito. Em tese, se o site manter uma boa proporção de tamanho das fontes e contraste, não teria problema com acessibilidade.

Entrei em um 6 sites para testar e em TODOS o zoom está desativado, inclusive no GitHub. Sinceramente não vejo como um problema muito grande.

Nenhum aplicativo, e nem o próprio sistema operacional do Android, mantém essa opção ativada :p

[RafaelHGBotelho]

Muito bom cara, pode escrever sobre isso que vou ler. Sobre o zoom também não vejo problema nenhum, a não ser que seja um site muito minimalista ou que não esteja com a tipografia correta para mobile.

[talitapagani]

Será que não tem alguma solução em que não precise utilizar o user-scalable=no? Mesmo com a tipografia de tamanho adequado, creio que há pessoas que ainda assim podem precisar de zoom para enxergar o conteúdo com um tamanho que seja mais confortável para ela. Essa opção acaba retirando o controle do usuário. Será que esse artigo ajuda: http://dbushell.com/2013/09/10/css-fixed-positioning-and-mobile-zoom/ ?

[felipefialho]

Então @talitapagani, mas essa é uma parada bem polemica.

Como disse acima, andei fazendo um teste rápido nos apps que tenho instalado no celular e em diversos sites e todos eles não permitem o zoom.

Estamos lidando com um problema de acessibilidade de longa escala, sem perceber? haha

[eduardojmatos]

@lfeh então, resolve em partes. O que a @talitapagani falou faz sentido pra mim tbm, de não impedir o zoom, mesmo que tenha uma boa tipografia (tanto em tamanho quanto tipo)

[eduardojmatos]

@lfeh tirando isso, achei sensacional esse jeito de resolver :)

[felipefialho]

Alias, essa é uma pauta. Realmente TODOS os apps e páginas que visitei retiraram essa opção. Que loucura.

[eduardojmatos]

@lfeh pode crer, tem vários mesmo :(

[talitapagani]

Sim, @lfeh, isso é um problema de acessibilidade de larga escala, bem parecido com aquela questão do outline:none que comentei no FrontinSampa. É como uma bad design pattern, rs.

[lucasctd]

@fdaciuk Estranho, tu baixou exatamente o branch (support-mobile) que eu coloquei no link?
Caso a tela não apareça, tente diretamente: http://localhost:8080/index.html

[fdaciuk]

Sim, dessa branch mesmo.. agora vi aqui que o start inicia a aplicação na porta 8081, mas ainda assim não é exibido o código que vc está falando.

EDIT: Agora consegui acessar na porta 8081/index.html :)

[fdaciuk]

@lucasctd testei sei código aqui, mas nem na versão desktop (com a tela reduzida) ele fica com position: fixed :)

Seu problema está além do mobile xD

[lucasctd]

@fdaciuk Entendi, então sua máquina já está utilizando a porta 8080.

[lucasctd]

Pode ser algum bug pq modifiquei algumas coisas pra tentar fazer isso funcionar no mobile.
O comportamento real dele é como consta na página abaixo:
https://lucas.mreis.dev/#/portfolio
Passe o mouse sobre um projeto, ao aparecer o overlay, clique em "See details"

[fdaciuk]

@fdaciuk Entendi, então sua máquina já está utilizando a porta 8080.

@lucasctd quando roda o yarn watch ele fica ouvindo a porta 8080

[fdaciuk]

@lucasctd esse site que vc passou só aparece a opção "See details" na versão desktop.. na versão com tela reduzida ou mobile ele só mostra o link "Visit", não abre a modal :)

[lucasctd]

@lucasctd testei sei código aqui, mas nem na versão desktop (com a tela reduzida) ele fica com position: fixed :)

Seu problema está além do mobile xD

Sim, só passei esse link pra tu ver o funcionamento correto dele no desktop. Eu desabilitei no mobile pq, como citei acima, o position fixed não funciona como esperado.

[fdaciuk]

Sim, só passei esse link pra tu ver o funcionamento correto dele no desktop. Eu desabilitei no mobile pq, como citei acima, o position fixed não funciona como esperado.

Entendi! Então, no exemplo que vc mostrou, ele funciona da forma como está no seu site: no desktop sem rolagem, fica certo. Mas no desktop com rolagem ele não está ficando "fixed". Isso que eu quis dizer :)

[lucasctd]

@felipefialho tem alguma ideia do pq não está funcionando?

[felipefialho]

@lucasctd Explica melhor, usou a técnica que mostrei lá em cima?

[lucasctd]

@felipefialho Não tenho como te explicar o problema agora. Contudo, tenho o mesmo problema em outra aplicação que acredito que tu pode me ajudar.
Neste site: https://designcolumbus.wpengine.com/
Login: demo
Pass: design

Preciso manter o menu fixo no topo, mas o position fixed não funciona, mesmo no modo desktop (no mobile é outro menu).
Sabe me dizer o pq?

[felipefialho]

@lucasctd Uhmmm, basta adicionar transform: scale(1) no header fixo, que vai funcionar.

[skreamozz]

ahi estaba la madre del borrego!! graciasss!!

[MarcoBosc]

Cara, salvou minha vida! Obrigado