i have experienced many times that error. There is no such error in FF and Chrome for android, but in default android browser in portratir mode, when footer is sticked to bottom part, and page content height is less than 100%. It shows white line under footer, it seems it's not any padding or margin of Body and HTML, it seems it's something other.
I can use developer tools on desctop to debug Chrome in android, but i don't know how to debug default andoird browser.
I have removed screenshot and link. Because there is no problem anymore.
Problem dissapeared after i have decreased min-width to be 980 from 1000px.
It seems min-height worked wrong in android and iphone default browsers because of wide width. For example you can took this examples of sticky footer, change min-width of body to be 1000-1040px and you will see empty space under footer.
Sticky footer example http://ryanfait.com/sticky-footer/
Related
Okay, this is driving me nuts. I've been troubleshooting a formatting issue and have been stripping and stripping the code down and no explanation for what I see.
Look at the following page:
http://test.solivitahoa.com/testbig.php
VERY simple HTML. No CSS, no JS, just a table with 2 columns. If you view it on your desktop, it's fine and looks as expected. HOWEVER, if you view it in Chrome on Android (I'm running Android 8 on OnePlus 5), the first cell has text that is much smaller than the right cell even though there is no sizes specified in the code.
The formatting is as expected until the last "1234567890" is set on the first line and then it increases the font size.
What causes this? Is there a way around it?
That is od. One way to fix it is to set a fixed text size on the whole document. For example, this css fixes the issue:
body {
font-size: 12px;
}
You can consider this your font reset css.
There's a problem that shows up on a Nexus 7 in which font-size: isn't working properly in a p:first-letter selector.
p:first-letter {
font-size:1.3em;
font-weight:bold;
color:#662020;
}
Screen shots from the Nexus 7 Chrome below. On the left is it in landscape orientation and looks as expected with the first letter larger. On the right the same page in portrait mode. Note the first letter, "V" has become smaller than the rest of the text. I tried setting font-size:130% and it looks the same, too small.
There are also similar problems with p:first-line that are probably related. I only see these issues on Android devices.
Any clues how to fix this (some meta viewport magic or something) or a work around?
This looks like it might be Font-boosting. Chrome will look at the page and work out if it needs to boost the font-size to make the text readable, in this case there is a chance that it is boosting the copy higher than the :before font-size.
Make sure you have a viewport set: and that should limit the effect of font boosting.
If you can also provide a demo site that will help me diagnose it further
Yes, there's a known bug: http://crbug.com/253763 (feel free to star it).
I'm a little confused by your screenshots though, because when I view vijayanderson.com/bio on a Nexus 7 everything looks fine. What version of Chrome are you using (Settings > About Chrome), and what do you have Settings > Accessibility > Text Scaling set to?
This is response to #Kinlan - it's long and so I made it an answer instead of a comment.
"font-boosting" - I knew it was happening but didn't know what it was called. If you want to look at the live site it's http://vijayanderson.com/bio.
The meta viewport is a standard one:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It seems like a bug in font-boosting in that it doesn't boost p:first-letter and p:first-line. It will appropriately boost a span with enlarged font in the paragraph, so a replacing p:first-letter with a span will look right, but is not the right fix.
I do not want to disable font-boosting, I think it adds usability. Thanks for your response.
Live URL: http://www.jungledragon.org/apps/jd3/lists
I'm working on a responsive website and as I am testing it on various devices (mostly using browserstack) I'm running into an issue that seems specific to the Android 2.3 browser.
Please find below the correct rendering of what I am trying to accomplish. This is how it works and looks on almost any browser tested. What we're looking at is a list of photos, each having a caption. The caption is entered by users and can be of any length. The caption in the top left photo is very lengthy, yet as you can see it is cut off correctly, for this I am using the text-overflow:ellipsis CSS property.
This is how the same page looks on the Android browser (2.3, using browserstack to simulate a Galaxy Note):
As you can see, the top left photo takes up more than the 50% that I have set it to, and as a result the view extends the browser window. It definitely has to do with the long caption, because if I shorten it, the view does fit in nicely.
Strangely, we do see the ellipsis effect taking place, it's just that it it somehow uses more width than I specify.
The HTML structure is as follow (pseudo code):
<ul>
<li>
<figure>
<img>
<figcaption>caption here</figcaption>
</figure>
</li>
</ul>
The li element has a width of 50% applied in CSS. The ellipsis properties are set on figcaption a. As explained, the Android 2.3 browser does seem to apply the ellipsis, yet it goes beyond the 50% width that I specified. I have tried all kinds of overflow properties at all levels of the html structure, all to no avail.
As I am using this technique in various places, I'm quite eager to solve it.
Note: I'm using border-box throughout the design, although I don't think that is the issue.
I created a mobile website which has a content slider with overlay text and bulleted navigation + a fixed ad banner at bottom of the page. Overlay text and navigation buttons arr placed inside separate div elements and div elements css position is set as absolute. And the fixed ad banner at the page bottom is placed in another div its css position is set as fixed.
On Android 4.0.3 Default Browser I experiences a strange issue which is not there in any other browser or mobile platforms. Am using samsung Galaxy SII to test this.
Issue:
Whenever the fixed banner appears all the above absolutely positioned div elements are not visible. Why this happens?
Take a look on this issue: http://code.google.com/p/android/issues/detail?id=31862
I had many problems with the stock browser too.
I'm working on a webApp that should resize to any screen size a device could have. On iOS and older android versions the viewport tag works fine. The picture on the screen is always resized to fit the screen.
(Like described here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19)
On the Galaxy Nexus (Android 4.0) it won't work. On the left and right side is about 20px space and I don't know why he does this.
My viewport tag looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
No matter what I change about the tag, the space is always there and the content doesn't fit to screen.
I've made a sample page to show you the effect: http://easyeve.w3y.de/link/index.html
If you open this link on an iPhone the content perfectly fits (you won't see anything yellow = body) and the document width is 320px. On the Galaxy Nexus you will see yellow space and the document width is 360px (which is exactly half of the display resolution). This should be 320px too!
Do you have this problem too and is there a way to fix it?
Update: I've noticed the same Problem on Galaxy Note / Android 2.3.6
Therefore it's not an Android 4 issue. It has to do with the large screen size I guess..
The very same issue here (Galaxy Nexus - Android 4.0.2), I am talking about regular web page in the default browser
Setting viewport meta initial-scale less then 1 (zoom out) seems to be ignored by the browser. Higher values than 1 (zoom-in) works fine.
There are settings in the browser (settings->advanced) where you can change things:
Default zoom - it makes difference, but it does not fix the issue
Auto-fit pages - in my case makes no difference
Everything seems to work just perfect in Chrome browser (beta at the moment), but that is not default browser for ICS / Galaxy Nexus.
UPDATE (solution):
Setting meta viewport "width=device-width" fails on Galaxy Nexus.
Setting viewport "width=1280" works just great (1280px is width of the screen of galaxy nexus).
Beware that setting "width=1280,user-scalable=no" breaks it again (you can zoom out even if there is user-scalable=no) :(
I ran into something somewhat similar on a Galaxy Tab 2. When setting up your WebSettings for the applcation, try setting webViewSettings.setUseWideViewPort(true); This will force Android to consider the viewport meta tag. It was being ignored in the case of the Galaxy Tab 2 for my app and everything in the viewport was drawing incorrectly until I changed this.
I ended up wrangling with this problem today. My issue was a little bit more complex, because I had to deal with a Wordpress stylesheet (from another theme) in addition to the base CSS. Chrome worked perfectly on my phone and tablet and the stock browser worked fine on the tablet, too. However, the stock browser kept zooming out and showing me the desktop view. There were no margins on either side, which was the correct behavior, but the browser should have removed the floats from my sidebar and content divs and zoomed in to the main content (I'm using #media queries). As weird as it sounds, I actually fixed this by first setting the Zoom setting to Far, refreshing, and then resetting Zoom to Medium and refreshing.
I should point out that when I looked at your page's HTML and CSS, I noticed that you set a specific pixel width for your page div. I'm pretty sure you need to use percentages for width instead. For example, my centered content div has margin: 0 auto;, min-width:320px;, max-width:900px;, and width:100%;.