Before anyone thinks this is a simple question or is a possible duplicate, please read the full post.
I'm developing an Android application and have implemented a WebView to act as part of the application. The WebView shows content from a website which is made with bootstrap and is mobile friendly. However, the CSS messes up here and there and as a result, the entire application looks odd and elements seem to be 'out of place'.
For example, I place a box and some text inside a container and place it specifically using CSS margins. Like below:
.testcontainer {
border: 1px solid red;
height: 50px
width: 100%;
}
.testcontainer .box {
height: 50px;
width: 50px;
background-color: blue;
display: inline-block;
vertical-align: top;
}
.testcontainer .text {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px solid blue;
}
<div class="testcontainer">
<div class="box"></div>
<div class="text">Testing</div>
</div>
Now all is good on a MacBook Safari and Opera browser and the text's border is pixel perfect and is aligned with the top of the blue box etc. However, on the WebView inside the application, the text is around 2px off and in some cases, 5px and so on. Why? I've tried to use em instead of px for font-size but the same issue occurs. What am I missing?
Related
Here's a sample page:
html,
body {
margin: 0;
padding: 0;
}
header {
padding: 16px 0;
text-align: center;
background: black;
}
header img {
width: 234px;
height: 222px;
vertical-align: bottom;
}
li {
background: url('images/WhatsApp.png') no-repeat right;
padding: 30px 50px;
list-style: none;
}
a {
font: bold 32px Calibri;
color: black;
text-underline-position: under;
}
<html dir="rtl" lang="fa">
<header>
<img src="logo.png" alt="Logo">
</header>
<main>
<ul>
<li>گروه اطّلاعرسانی</li>
<li>ارسال تکالیف</li>
</ul>
</main>
It doesn't look good on Android Chrome, i.e. the underline is cut and crosses some descenders.
Here's the final result, which I tested on the latest version of Chrome, 93:
I see that the text is cut on the letters that tend to intersect with the underline; so you can increase the offset between the line and the text using text-underline-offset property in CSS:
text-underline-offset = 2px
/* or */
text-underline-offset: 0.1em;
If you used the pixel version, you probably need to manipulate the 2px a bit, but make sure to test that on different devices.
Make sure that if you increase this offset much, then you'd get them intersected with the text in case you have a multi-lined text. I recommend to use it on a single line of text, and that is already your case.
This issue also might be solved if you change the font type, as the height of fonts differs from one typeface to another, so you can check this as well.
For further research check the documentation, and this SO question.
I've been trying to center a number inside of a circle, and I just can't quite get it. Every time I think I have it, it seems like it on some platform it doesn't work (whether it's an apple phone, an android browser, Safari on Mac OS X, or Chrome / Firefox on Windows) there's a 1-2 pixel difference.
Here's the code:
.unread-replies {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
background-color: #F24648;
border-radius: 50%;
width: 25px;
height: 25px;
font-weight: 500;
color: white;
font-size: 17px;
border: 1px solid #00000066;
}
* {
box-sizing: inherit;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
<div class="unread-replies">1</div>
Fiddle copy here: https://jsfiddle.net/3vr2mkfb/3/
In this case it seems like it's not vertically centered on Chrome in my desktop browser, but it is vertically centered on Chrome on my Android phone. Why the discrepancy?
If I try small hacks like padding-bottom: 2px; then it inevitably causes some problem on some other platform. I think I instead need the actual fix, but I don't know if there is one?
add some line-height with the same value as the font-size and see if it fixe anything.
Use Viewport Units like vw for width and vh for height instead of px and % because it will help you make your webpage/website responsive.
It will surely solve your issue but if it doesn't let me know in the coments I will try my best to help you.
I have run into a very strange and incredibly annoying rendering bug in the Android WebView. I have tested this in a bunch of other browsers both on the computer and on my phone, and it does what its supposed to, but not in the WebView.
The blue box should be the same height as the header (30px) with text vertically centered in it, but instead, it is rendered as 25px. The only fix I've found, which doesn't make any sense, is to set the line-height of the blue box to 35px only on Android WebView, but this is a terrible hack.
css
body { margin: 0; }
#header {
height: 30px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#button {
float: right;
line-height: 30px;
background-color: blue;
color: wheat;
vertical-align: middle;
}
html
<body>
<div id="header>
<div id="button"></div>
</div>
</body>
This is caused by the font boosting feature from webkit. There is actually a bug assigned to your problem: Bug 84186
Having the same problem as you, I actually created a javascript library that tries to fix the issue automatically. Be warned though, it's still in BETA status.
I am using phonegap to build android app. The problem right now I am facing is that when I scroll down in listview the tabs icon's border at the bottom becomes rough and deteriorated. Could someone help me out why this is happening and how to solve it? I am adding all the images using css.
Update
Here is my code
css
footer {
position:fixed;
width: 100%;
height: 60px;
bottom:0;
left:0;
padding: 0;
line-height: 100px;
z-index:2;
background: url(../../assets/img/tabbg.png) repeat-x;
}
footer ul {
list-style-type: none;
margin: 0; padding: 0;
text-align: center;
}
footer ul li {
display: block;
float: left;
width: 33%; line-height: 50px;
margin-right: 0.5%;
height: 58px;
text-align: center;
overflow: hidden;
}
footer ul li.one {
margin-left: 0.5%;
}
footer ul li a {
display: block;
text-decoration: none;
margin: 1px;
height: 100%; width: 100%;
}
footer ul li a.home {
background: url(../../assets/img/home3.png) center no-repeat;
}
footer ul li a.profile {
background: url(../../assets/img/camera2.png) center no-repeat;
}
footer ul li a.cam {
background: url(../../assets/img/profile2.png) center no-repeat;
}
Here is my html for tabs
<footer>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</footer>
Without seeing exactly the issue you're getting it's difficult to know if it's this however I'm having problems porting an App I built for the iPhone in PhoneGap to Android (still using PhoneGap).
I'm finding that using position Fixed causes issues and I've also had problems using width:100% (trying to cater for any-width phone) as opposed to a specific pixel value. Using overflow:hidden on whole-page divs also seems to be flaky.
I was getting display issues where elements would disappear and reappear. I'm still having problems using css rotate.
Using position:absolute and setting page-size div dimensions using window.innerWidth and innerHeight seems to cure things.
A bit non-specific I'm afraid but it may help..
I'd missed off the target-densityDpi field from the viewport metatag which appears to be crucial.
Leaving it out means the phone scales down everything by a factor of 1.5 I'm confused as to why unless background graphics dimensions cause this behaviour. I noticed window.innerWidth and window.innerHeight were reporting 320*533 instead of the actual 480x800 screen size.
While it looked fine I suspect the effort of scaling everything was taking too many resources - I was getting draw timeouts in LogCat - and I guess this caused the dropouts and flicker.
The scaling is also causing the rough edges. When static the phone anti-aisled the edges but when you drag an element its edges became pixelated.
i added a div with a lot of data in it, and it works fine on a PC and on the Blackberry, but it doesn't work on Android: The data is retrieved with no problems but the div isn't scrollable.
Here is the HTML code:
<div id="scroll">
<div runat="server" ID="view"></div>
</div>
And the CSS:
#view
{
position: absolute;
top: 15%;
left: 0.9%;
width: 98.3%;
height: 75%;
font-family: Calibri;
font-size: 0.5em;
white-space: pre-wrap;
border: 1px solid black;
overflow: auto;
padding: 0.2em;
}
What is the problem?
If you're trying to do this on a native android application, you're going to have to implement a ScrollView:
http://developer.android.com/reference/android/widget/ScrollView.html
I found a creative work-around (that works on Android (2.3.5 Gingerbread) and Firefox browser for Android).
I didn't have the problem reported here on the first site I did but had issues on the second. After finding this answers here I remembered the old site worked so I checked what I did there. Copying over old to new site I was able to fix my problem...
This works on Android/Firefox browser but does not put a scroll bar indicator on screen (but touch-drag scrolls the content down the .
What WORKED for me is dual Tags... EMBED code to scroll in a second tag.
<div style="width: 100%; height: 100%; background-color:#fdc4f6; border: solid 1px #000;">
<div style="overflow:scroll; height:350px; text-align:left; padding: 1em 4em 0 4em;"> [Content will scroll if text overflows div on Android now]
then close DIV tags now the content in the second
may not be the prettiest code or method to use, but it got the job done for me (although I haven't tested in iOS devices).
For what it's worth...
-LB-
<div style="width: 100%; height: 100%; background-color:#fdc4f6; border: solid 1px #000;"><div style="overflow:scroll; height:350px; text-align:left; padding: 1em 4em 0 4em;"> [Content will scroll if text overflows div on Android now]</div></div>