2016-09-27 5 views
0

私はCordovaアプリを使用しています(crosswalk-webviewを使用しています)、いくつかのビューがあり、いくつかのビューにはスクロールリストがあります。このリストの各行には、行末に勾配があり、スムーズにテキストを隠すことができます。そして、問題がある:512MBのメモリを搭載したデバイスでAndroid用Chromeのグラデーションペイントに問題があります

Gradient paint issue

私は、このマークアップとスタイルを持っています。

HTML:

<div class="view-block list-block" style="padding-top: 0px;"> 
    <div class="view-block view-list"> 
     <div> 
      <div class="row-wrapper status-row " style="touch-action: manipulation; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
       <div class="middle-container"> 
        <span class="name"><i class="icon-status icon-status-ok"></i> Звонящий Для Тестов</span><br> 
       </div> 
      </div> 
      :after 
     </div> 
     <div> 
      <div class="row-wrapper status-row " style="touch-action: manipulation; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
       <div class="middle-container"> 
        <span class="name"><i class="icon-status icon-status-off"></i> Емец Владимир Александрович</span><br> 
        <span class="sub-name">Программист</span> 
       </div> 
      </div> 
      :after 
     </div> 
     ... 
    </div> 
</div> 

はCSS:私は.view-main .view-list勾配にoverflow-yを無効にした場合

.view-main .list-block { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
} 

.view-block { 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.view-main .view-list { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
    z-index: 0; /* For stack context using when paint */ 
} 

.view-list > div { 
    overflow: hidden; 
    position: relative; 
    margin-bottom: 0.2em; 
} 

.view-list > div .row-wrapper { 
    height: 3em; 
    padding: 0 0.5em 0 0.5em; 
    overflow: hidden; 
    position: relative; 
} 

.view-list > div .row-wrapper:after { 
    content: ''; 
    position: absolute; 
    height: 3em; 
    width: 10%; 
    right: 0.5em; 
    top: 0; 
    background: #ffffff; 
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#ffffff)); 
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #ffffff 100%); 
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%); 
} 

通常を描きますが、無効にこの要素の上にスクロールします。エミュレータは1024メガバイトのメモリを持っているか持っている通常の場合

グラデーション塗装Androidのバージョン> = 5

これをどのように修正するには?

答えて

0

GoogleグループのChromium TRIMプロジェクトのtopicのバグです。

私のための解決策 - クロスウォークウェブビューのために--disable-low-end-device-modを使用してください。

関連する問題