CODEWITHSUNDEEP
androidcsswebview
Christopher Reid
Christopher Reid

Reputation: 4484

Android WebView css line-height rendering bug

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.

enter image description here

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>

Upvotes: 4

Views: 4228

Answers (1)

Daan Sieben
Daan Sieben

Reputation: 31

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.

Upvotes: 3

Related Questions