polyn0m polyn0m - 1 month ago 15
CSS Question

Gradient paint issue in Chrome for Android on device with 512mb memory

I have Cordova app (used crosswalk-webview), it's contains several views and some views have lists with scrolling. Each row in this lists have gradient on row end for smoothly text hiding. And problem is:

Gradient paint issue

I have this markup and styles.

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 .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%);
}


If I disable
overflow-y
on
.view-main .view-list
gradient will paint normally, but scrolling on this element disabled.

Gradient paint normally if emulator have 1024mb memory or have Android version >= 5.

How to fix this?

Answer

It's a bug in Chromium TRIM project, topic in Google Groups.

Solution for me - use --disable-low-end-device-mod for crosswalk-webview.

Comments