0
私はCordovaアプリを使用しています(crosswalk-webviewを使用しています)、いくつかのビューがあり、いくつかのビューにはスクロールリストがあります。このリストの各行には、行末に勾配があり、スムーズにテキストを隠すことができます。そして、問題がある:512MBのメモリを搭載したデバイスでAndroid用Chromeのグラデーションペイントに問題があります
私は、このマークアップとスタイルを持っています。
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
これをどのように修正するには?