css style let webview show blank, only in 4.4(android kitkat)

Question

I found a error in 4.4 that when I link my stylesheet to my html page the webview is showing a blank page.

When I remove the Stylesheet it shows the HTML but I have no idea what is wrong with my stylesheet?

When I remove all my lines from the css I still get the error, only way is to remove my css file?

    <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test</title>
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Gafata' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="stylesheet/style.css" type="text/css">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/noscroll.js"></script>
        <script type="text/javascript" src="js/jsscript.js"></script>
        <script type="text/javascript" src="js/getInfo.js"></script>
    </head>
    <body>

        <div class="background"></div>
        <div class="button">
            <i class="fa fa-align-justify"></i>
        </div>
        <div class="wrapper">
            <div class="menu">
                <h2>Menu</h2>
                <ul>
                    <li class="programma">Programma</li>
                    <li class="uitslagen">Uitslagen</li>
                    <li class="standen">Standen</li>
                    <li class="tweets">Tweets</li>
                    <li class="informatie">Informatie</li>
                </ul>
                <div class="logo"></div>
            </div>   
            <div class="mainContent">
            </div>
        </div>
    </body>
</html>

Can you guys look at it? Maybe someone knows this problem?

html {
    width:100%;
    height:100%;
    background: #fff;
    margin:0;
    padding:0;
    overflow-x: hidden;
}

body {
    width:100%;
    height:100%;
    background: #fff;
    margin:0;
    padding:0;
    overflow:hidden;
    overflow-x: hidden;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
    -webkit-tap-highlight-color: transparent;
} 

.background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(../images/bg.jpg);
    background-position:center;
    background-size:cover;
}

.wrapper {
    width:180%;
    height:100%;
    position:absolute;
    overflow:hidden;
}

.mainContent {
    width:51%;
    height:90%;
    margin-left: 1%;
    margin-top:40px;
    background-image:url(../images/content_bg.png);
    background-repeat:repeat;
    border:2px solid #838282;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    overflow:auto;
    text-align:center;
    float:left;
    padding:4px;
}

.button {
    position:fixed;
    top:2px;
    left:8px;
    border:2px solid #35479d;
    padding:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor:pointer;
    z-index:200;
}

.button i {
    color: #35479d;
    font-size:23px;
}

.return {
    position:fixed;
    top:-5px;
    left:54px;
    padding:5px;
    cursor:pointer;
    z-index:200;
}

.return i {
    color: #35479d;
    font-size:42px;
}

.mainContent h2 {
    font-family: 'Gafata', sans-serif;
    font-size:26px;
}

.mainContent ul li {
    font-family: 'Gafata', sans-serif;
    list-style:none;
    margin-bottom:9px;
    margin-left:-37px;
    font-size:22px;
    color:blue;
}

.mainContent ul li.header {
    font-size:24px;
    margin-top:10px;
    color:#fff;
}

.mainContent ul a {
    text-decoration:none;
    color:#27346e;
}

.mainContent ul a:visited {
    text-decoration:none;
    color:#27346e;
}

.menu {
    width: 0px;
    height: 100%;
    background-image:url(../images/menu_bg.png);
    background-repeat:repeat;
    border-right:3px solid #1d1d1d;
    float:left;
    text-align:center;
    -webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
    transition: all 1s;
    overflow:hidden;
}

.menu h2 {
    font-family: 'Gafata', sans-serif;
    color:#0042ff;
    margin-bottom:40px;
    padding-bottom:5px;
    border-bottom:2px solid #1d1d1d;
    font-size:36px;
}

.menu ul li {
    font-family: 'Gafata', sans-serif;
    list-style:none;
    width:90%;
    margin-left:-3px;
    border-bottom:1px solid #1d1d1d;
    padding-bottom:3px;
    margin-bottom:30px;
    font-size:24px;
    color:#fff;
    height:55px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.logo {
    position:relative;
    margin:0 auto;
    margin-top:-11%;
    background-image:url(../images/logo.png);
    width:100px;
    height:100px;
    background-repeat:no-repeat;
}

.logo_informatie {
    background-image:url(../images/logo.png);
    width:100px;
    height:100px;
    margin:0 auto;
}

.logo_b2w {
    background-image:url(../images/b2wlogo.png);
    width:212px;
    height:159px;
    margin:0 auto;
}

Answer 1

We just discovered a simialar issue with webviews and Android 4.4. The top level DIV that contained a whole section of HTML had a CSS class:

.task-resolution {
    background: #232323;
    position: absolute;
    width: 100%;
    bottom: 0;  
    z-index: 50;
}

By removing either position or bottom fixed our issue. Still in process of determining exactly what the conflict is but maybe this might help. Else it's removing one style element at at time. Also have you seen this link? http://developer.android.com/guide/webapps/migrating.html

css style let webview show blank, only in 4.4(android kitkat)

Question

1 answers

solution1
0 2014-05-14 17:25:43

css style let webview show blank, only in 4.4(android kitkat)

Question

1 answers

solution1 0 2014-05-14 17:25:43

solution1
0 2014-05-14 17:25:43