Rolagem Suave + Mobile + Scrolling + META + Viewport

[M.S.S 0]

Boa tarde,

 

Eu estou com dor de cabeça com a altura da viewport de dispositivos mobile e já tentei todo tipo de hack do bem para evitar que o conteúdo trema na rolagem.

 

O problema não ocorre em PC nos navegadores IE, Firefox, Chrome, Edge, Safari e Opera nem no MAC nos navegadores Chrome, Safari e Firefox.

 

Mas como quase todos os navegadores mobile têm um redimensionamento automático com a rolagem da página você acaba tendo problema com recursos como o “top:100%” com “position:absolute” na rolagem do conteúdo (o navegador mais problemático é o Chrome de IOS).

 

Isso ocorre também com background, mesmo com recurso o “background-cover: cover;” e o “background-size: cover;” configurados (detalhe que eu configurei os prefixos -webkit-, -moz-, -ms-, -o- e -vendor-).

 

Segue a META que eu estou usando (acredito que o problema seja em parte por causa dela, mas preciso dela para que a resolução fique adequada para dispositivos mobile)

 

Estou usando essa META no site em que estou desenvolvendo, pois quero que o usuário não de zoom no site (por causa do layout).

<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1">

Mas testei a mesma META com "user-scalable=yes" e não adiantou.

<meta name="viewport" content="initial-scale=1.0,user-scalable=yes,maximum-scale=1">

Segue meu código CSS:

#texto_sombra {
font-family:"Trebuchet MS", tahoma,  verdana, arial;
font-size:35px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.80);
text-align:center;
color:#FFFFFF;
bottom: 80px;
display: block;
left: 50%;
position: absolute;
width: 400px;
z-index:1 !important;
}

#container_pai {
top:100%;
width:80%;
margin-left:10% !important;
margin-right:10% !important;
height:600px;
background:#fff;
position:absolute; 
padding:0px; 
display:block; 
z-index:20 !important;
}

#backgroup {
background: url(http://wallpaper.ultradownloads.com.br/118363_Papel-de-Parede-Campo-Aberto--118363_1600x1200.jpg);
background-position: center center;
background-repeat: no-repeat;
position:fixed;
z-index:-1;
display:block !important;
width: 100%;
height: 100%;
min-width:100%;
min-height:100% !important;
right:0px;
bottom:0px !important;
margin: 0px;
overflow:hidden;
  
/*AJUSTE*/
-webkit-background-cover: cover;
-vendor-background-cover: cover;
-moz-background-cover: cover;
-ms-background-cover: cover;
-o-background-cover: cover;
background-cover: cover;
/*///////////////////////////////*/	
-webkit-background-size: cover;
-vendor-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*AJUSTE*/
}

Segue meu código HTML:

<div id="texto_sombra">Titulo da Página</div>
<div id="container_pai"></div>
<div id="backgroup"></div>

Visão do código no jsfiddle:

 

https://jsfiddle.net/mauriansoares/xy01xL7z/

 

Se alguém puder ajudar

[AndersonMamede 88]

Na verdade o que provoca esse "efeito" é a barra de endereço, que ao descer o scroll (celular) ela é oculta, fazendo com que a altura do browser aumente alguns pixels (porque ocupa o espaço que antes tinha a barra de endereço), e ao subir ela aparece novamente, diminuindo a altura.

Não sei se tem como resolver isto por CSS, mas você poderia usar JavaScript... quando a página for carregada, você pega a altura da janela e coloca ela fixa (em px) no elemento... aí ela não altera mais.

[M.S.S 0]

Eu tentei fazer isso.

Criei uma DIV que recebia o height via uma variável em javascript.
Chegue a colocar animações de CSS via javascript para suavizar o redimensionamento da Viewport por causa da barra de endereço.
Mas não consegui resolver o problema.

Segue o meu código:

 

Javascript:

<script type="text/javascript">
function DivAltura(id) {
	
var stage = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
	
document.getElementById("blocoLivre").style.height = stage+"px";
document.getElementById("blocoLivre").style.WebkitTransition = "all 0.2s"; // Code for Safari 3.1 to 6.0
document.getElementById("blocoLivre").style.transition = "all 0.2s"; 
}
</script>

HTML:

<body onLoad="DivAltura('blocoLivre')" onresize="DivAltura('blocoLivre')">


<div id="blocoLivre"></div>


// Conteúdo do site

[M.S.S 0]

Um detalhe importante, o problema não aparece no navegador padrão do Android e no Opera Coast.
No safari ele é muito sutil, pois sua Viewport não tem um redimensionamento grande.

Já no Chrome e no Firefox o problema é mais evidente.

 

Dispositivos em que eu fiz testes:

Ipad Air 9.7″ com IOS 9

Iphone 4 com IOS 7

Tablet Samsung Galaxy Tab4 10.1″ com android 4.4

[L. Henrique 179]

M.s.s,

Quando é criado a estrutura de um site e você necessita da utilização de um JS para corrigir problemas, então a elaboração do HTML / CSS (Responsivo) foi feita de forma incorreta. A ideia de um site responsivo é que as coisas se ajustem de forma que encaixem na viewport do dispositivo, nada mais além disso.

Caso queira fazer um teste, inicie um projeto com Bootstrap, monte-o sem editar nenhum documento css e veja se o mesmo problema ocorre nos dispositivos em questão.

Aconselho ler os seguintes sites:

• https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
• http://www.incomediary.com/best-practices-responsible-responsive-web-design

 

Abraços!

[M.S.S 0]

O problema é que a tela treme com o "TOP:100%" na hora que a Viewport se ajusta, não há uma transição suave.

O mesmo acontece se você usar um javascript para forçar uma DIV a ter 100% de height via variável que passa o valor em pixel.

Acho que o problema em parte é a meta tag.

<meta name="viewport" content="initial-scale=1.0,user-scalable=yes,maximum-scale=1">

Detalhe, que a mesma página não treme se eu não usar o "TOP:100%" ou Script para forçar o height em uma DIV para esconder o conteúdo.