weex设置header背景透明无效

Question

需要实现一个滚动页面，title固定在页面顶部的功能，通过weex，但是简单的滚动可以，如果稍微复杂一点，背景色怎么也设置不上。

注：分别复制两种效果代码到 http://dotwe.org/vue/，然后手机下载http://weex.apache.org/cn/tools/playground.htmlapp，通过扫描可以看到效果

失败的效果：

<template>
  <scroller>
    <header>
      <div class='banner-wrapper12'>
        <text class="banner12">HEADER123</text>  
      </div>
    </header>
    <list>
      <template v-for="(index, i) in lists">
        <header :key="`${index}-header`" v-if="i%2===0 && i != 0">
          <text class="banner">{{index}} HEADER</text>
        </header>
        <cell :key="index">
          <div class="panel">
            <text class="text">{{index}}</text>
          </div>
        </cell>
      </template>
    </list>
  </scroller>
</template>

<script>
  export default {
    data () {
      return {
        lists: [
          'First', 'Second', 'Third', 'Fourth',
          'Fifth', 'Sixth', 'Seventh', 'Eighth'
        ]
      }
    }
  }
</script>

<style scoped>
  .banner-wrapper12{
    width: 750px;
    font-size: 60px;
    text-align: center;;
  }
  .banner12 {
    padding: 25px;
    font-weight: bold;
    color: #41B883;
    background-color: rgba(255, 255, 255, 0);
  }
  .banner {
    width: 750px;
    padding: 25px;
    font-size: 60px;
    text-align: center;
    font-weight: bold;
    color: #41B883;
    background-color: rgb(162, 217, 192);
  }
  .panel {
    width: 600px;
    height: 300px;
    margin-left: 75px;
    margin-top: 35px;
    margin-bottom: 35px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
  }
  .text {
    font-size: 50px;
    text-align: center;
    color: #41B883;
  }
</style>

ok的效果

<template>
  <list>
    <header>
      <div class='banner-wrapper'>
        <text class="banner">HEADER</text>  
      </div>
    </header>
    <cell v-for="index in lists" :key="index">
      <div class="panel">
        <text class="text">{{index}}</text>
      </div>
    </cell>
  </list>
</template>

<script>
  export default {
    data () {
      return {
        lists: [
          'First', 'Second', 'Third', 'Fourth',
          'Fifth', 'Sixth', 'Seventh', 'Eighth'
        ]
      }
    }
  }
</script>

<style scoped>
  .banner-wrapper{
    width: 750px;
    font-size: 60px;
    text-align: center;;
  }
  .banner {
    padding: 25px;
    font-weight: bold;
    color: #41B883;
    background-color: rgba(255, 255, 255, 0);
  }
  .panel {
    width: 600px;
    height: 300px;
    margin-left: 75px;
    margin-top: 35px;
    margin-bottom: 35px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
  }
  .text {
    font-size: 50px;
    text-align: center;
    color: #41B883;
  }
</style>