Scrolling + META + CSS + BUG

[mss]

Good afternoon,

Sorry for my English, but I am Brazilian and not mastered the language.

 
I am a headache with the height of the mobile devices viewport and I’ve tried all sorts of good hack to prevent content umlaut on the scroll.

 
The problem does not occur on PC in IE, Firefox, Chrome, Edge, Safari and Opera on Mac or on Chrome, Safari and Firefox.

 
But like almost all mobile browsers have an automatic resizing with scrolling the page you end up having trouble with features like “top: 100%” to “position: absolute” in a scrolling content (the most problematic browser is Chrome for IOS ).

 
This is also the background, even using the “background-cover: cover;” and the “background-size: cover;” configured (detail I configured the -webkit- prefixes, -moz-, -ms-, -o – and -vendor-).

 
Follows the META I’m using (I believe the problem is in part because of it, but it takes so that the resolution be suitable for mobile devices).

 
I am using this META on the site that I’m developing, because I want the user does not zoom the site (because of the layout).

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

But I tested the same META with “user-scalable = yes” and to no avail.

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

Follow my CSS code:

#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*/
}

Follow my HTML code:

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

code in jsFiddle:

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

If anyone can help

[rkieru]

I am not sure I understand what you are trying to accomplish.

If your concern is that the title (Titulo da Página) and content box appear so far below, the reason for that is in your CSS:

#container_pai {
    top:100%;

The top:100% is pushing your content down.

[mss]

My concern is with “scrolling” on mobile devices.

The page content shakes when I I use the “scrolling” with the “touch” of mobile devices.

The intention is that my content “be hidden” with “top: 100%” and only appear with the scroll.

the title of the page should be the 80px of the bottom

[rkieru]

The only issues I can see on mobile would (likely) revolve around your choosing to use a background image with absolute positioning, instead of just making that a background image via say… body or html.

Tested on an iPhone 6S

Is there a particular device where you are seeing the issue?

[mss]

I had trouble with:

Ipad Air 9.7″ with IOS 9

Chrome + Firefox

---

Iphone 4 with IOS 7

Chrome

---

Tablet Samsung Galaxy Tab4 10.1″ with android 4.4

Chrome + Firefox

[mss]

Here’s a link to a page that I rode with the problem.

http://maurian.com.br/teste.html

[rkieru]

Take all of the styles you are applying to #backgroup and apply it to body instead, and tell me if you still see the ‘shaking’ issue.

My guess is that the issue to which you are referring is when a user is scrolling past the boundaries of the website. If they are scrolling through an IMAGE the browser will sometimes allow you to scroll past those boundaries.

On Safari it creates some white padding, and even allows for pushing left or right.

[mss]

The problem is that every mobile device hides the address bar when the User “roll the scroll bar” and it is exactly at this point that the site trembles.

This problem does not appear in “Opera Coast”, the Android browser and “Safari is very subtle.”

[mss]

Oh, regarding not having the “top: 100%”.
Without it the bug does not appear.

But I’ll need to work with the “top: 100%”.

Note: I tried to use the background in the Body too, but not solved the problem.

[rkieru]

Have you considered either alternative to top:100%

• An empty <div> with a predefined height
• Replacing top:100% with padding:

[mss]

I tried to do that.

I created a DIV that received the height via a variable in javascript.
I even put CSS animations via javascript to smooth resizing the Viewport because the address bar.
But I could not solve the problem.

Here’s my code:
 
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>

Note: I will follow your suggestion and I will test the use of “padding” and “margin”.
I have not thought about it.

[Author]

Posts