Rolagem Suave + Mobile + Scrolling + META + Viewport

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](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