Android webview not rendering transparency

Android webview not rendering transparency

My webview application fails to render a transparent bar correctly.


As you can see from the second image, it renders correctly. image one is
from my webview, image 2 is from the chrome mobile browser.
I've actually taken the code from android.moviis.com, i'm positive its a
css issue.
The code is as follows.
<img class='movie-backdrop' alt="Backdrop Image"
src="http://slurm.trakt.us/images/fanart_movies/205736.2-940.jpg"
/>
<div class='movie-topinfo'>
<img class='movie-cover'
src="http://slurm.trakt.us/images/posters_movies/205736.2-138.jpg"
alt="Poster" />
<h3 class='movie-title'>After Earth(2013)</h3>
<p class='movie-desc'>DANGER IS REAL, FEAR IS A CHOICE</p>
</div>
<div class='movie-topinfo-bg'></div>
.movie-backdrop {
margin-bottom: -165px;
max-height: 500px;
width: 100%;
}
.movie-topinfo {
color: #FFFFFF;
display: block;
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
list-style: none outside none;
margin-top: 3px;
min-height: 65px;
overflow: hidden;
padding: 10px 15px 10px 70px;
position: relative;
text-align: left;
text-decoration: none;
text-overflow: ellipsis;
text-shadow: 0 0 0 #FFFFFF;
top: 75px;
white-space: nowrap;
z-index: 999;
}
.movie-topinfo-bg {
background-image: linear-gradient(#232323, #000000);
height: 75px;
margin-bottom: -2px;
opacity: 0.8;
position: relative;
}
.movie-title {
display: block;
font-size: 16px;
font-weight: bold;
margin: 0.6em 0;
overflow: hidden;
padding-top: 5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.movie-desc {
color: #FFFFFF;
display: block;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
font-weight: normal;
margin: -0.5em 0 0.6em;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
text-shadow: 0 0 0 #FFFFFF;
white-space: nowrap;
}
.movie-quote-name {
font-size: 11px;
}
.movie-cover {
border-radius: 3px 3px 3px 3px;
display: block;
float: left;
height: 50px;
left: 5px;
margin-top: 20px;
margin-right: 10px;
max-height: 80px;
max-width: 60px !important;
overflow: hidden;
position: absolute;
text-indent: -999em;
top: 2px;
width: 55px;
}
Help would be greatly appreciated.