I am having a problem with Chrome on android mobile phones where an element on my webpage that is 100% width and height is going beyond the viewport?
It seems to work no problem on Android Browser, Firefox for Android, Chrome, Firefox and IE on desktop.
Link to my website: https://www.codesmite.com
If you shrink the page to a mobile size you will see the sidebar menu hides away off screen and a menu button appears to bring it back. When you click the menu button the sidebar transitions across to 100% width and height and the content transitions off the screen to the right. I have overflow:hidden so the content should not be stretching it wrapper but instead leaving the viewport, which works.
For some reason on Chrome for Android the 100% height of the element reaches all the way to the bottom of the page (It isn't fixed anymore, if you scroll down the menu items disappear). The width also stretches beyond the viewport width to the edge of all the overflowing content?
I can't work out what is causing this?
On your <div id='content'> you have
#media only screen and (max-width: 749px), screen and (max-height: 549px)
global.min.css:1#header:target~#content {
left: 100%;
Delete left: 100%; and will work;
Or add CSS: div#content{display:none;} when you open menu, both works for me.
Related
I want to position “No results found” text in a div residing in body tag that has:
{
height:100%;
}
The div has:
margin-top: calc(50vh - 100px);
It looks ok except on iPhone Safari and Chrome (and I suspect Android) portrait mode. In that case a navigation toolbar appears at the bottom, pushing everything else up.
So in that case I want to use:
margin-top: calc(50vh - 140px);
assuming the bottom browser menu bar is 40px. That way hopefully the text would look more vertically centered.
What’s the best way to detect if those bottom menu bars are showing?
In my recent project I am using element that are using percentage heights. It works well on most browsers, however, it creates unwanted behaviour in Chrome Mobile.
In a nutshell - when a user scrolls up, the address bar becomes visible. This changes the height of the screen, which forces the elements to resize. As this happens after the scroll ends, the user sees a "jump" after the scroll stops.
Is there any way to avoid this behaviour and still use elements sized with the viewport percentage?
Yes. You can fix this problem with css. Just use #media queries like that:
#media only screen
and (min-device-width: 320px) //here is your condition for the screen
and (max-device-width: 568px){
.class{
height: 80%;
}
}
You can have as many media-queries as you need. Please note that you may need to edit the min-device-width or/and max-device-width to your needs. Depends on the device.
I have a site with an element that is 100vh:
height:100%; /* for older browsers */
height:100vh;
This works fine on the desktop browsers I tested it in, as well as in Chrome on Android.
But both in Firefox on Android and the default Android web browser, the element is somewhat taller than the browser tab, maybe (eyeballed) as tall as the window plus the tab header.
Why is that so, and how do I avoid it?
100vh is 100% of viewport height and 100vw is 100% of viewport width.
I need help with a page in html 5 for android and iphone.
It should contain two links that are 5% on the bottom of the screen. I tried using CSS by placing a table or div with absolute position and bottom 5%. But the virtual keyboard this decoupled links above the virtual keyboard when it appears and disappears when the site returns.
I tried not to use absolute position and place within the footer tag, and presents the same problem.
If it was a native android project could use: android:windowSoftInputMode="adjustNothing", but I can not use it because it is a web project.
I have many items up these links that should get the screen below:
margin-top: 20%
img logo (80% width of screen)
margin-top: 10%
input login
margin-top: 10%
input pass
margin-top: 10%
button
margin-top: 5%
other link
blank area
area links botton in the page (botton and 5% of botton)
The logo image should have a width of 80% and let its height be set automatically to not distort.
And all this must be equal for all iphone and android devices (tablets and smartphones)
Help!
You might try: <img src="image.jpg" width="80%">. If you only specify the width, the height should be automatically set proportionally. That's the way it works in browsers, but i'm not sure how it will behave inside a phone app.
CSS:
body{
margin:0 auto;
background-image:url("someURL"),
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
}
This works fine in modern browsers, the image stays the same when scrolling. On an android tablet however the image doesn't update right away. The image only updates about half a second after you release (move your finger away) and in the mean while the gap is just white.
Is there away to fix this issue or is it just how certain browsers behave?
It is known bug, you can find details here:
http://code.google.com/p/android/issues/detail?id=3301