- This topic is empty.
-
AuthorPosts
-
June 14, 2016 at 11:48 am #242853
mss
ParticipantGood 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
June 14, 2016 at 12:34 pm #242854rkieru
ParticipantI 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.June 14, 2016 at 1:13 pm #242855mss
ParticipantMy 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
June 14, 2016 at 1:47 pm #242856rkieru
ParticipantThe 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
orhtml
.Tested on an iPhone 6S
Is there a particular device where you are seeing the issue?
June 14, 2016 at 1:55 pm #242857mss
ParticipantI 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
June 14, 2016 at 3:17 pm #242859mss
ParticipantHere’s a link to a page that I rode with the problem.
June 14, 2016 at 3:42 pm #242860rkieru
ParticipantTake all of the styles you are applying to
#backgroup
and apply it tobody
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.
June 14, 2016 at 3:48 pm #242861mss
ParticipantThe 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.”
June 14, 2016 at 3:59 pm #242863mss
ParticipantOh, 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.
June 14, 2016 at 6:59 pm #242868rkieru
ParticipantHave you considered either alternative to
top:100%
- An empty
<div>
with a predefined height - Replacing
top:100%
withpadding:
June 14, 2016 at 7:40 pm #242871mss
ParticipantI 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. - An empty
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.