Android WebView css web design error
I ran into a very strange and incredibly annoying rendering error in Android WebView. I've tested this on a bunch of other browsers on both computer and my phone and it does what it should, but not in WebView.
The blue border should be the same height as the heading (30px), with text vertically centered in it, but instead it displays as 25px. The only fix I've found that doesn't make any sense is to set the line height of the blue box to 35px on Android WebView only, but that's 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>
source to share
This is caused by the font boosting feature from webkit. There is an error in your problem: Error 84186
Having the same problem as you, I actually created a javascript library that tries to fix the problem automatically. However, be careful, it is still in BETA status.
source to share