Flashing border on scroll within ListView on Android when border-radius is applied

[sserdyuk]

The rounded borders are flashing in and out on list view scroll, see the image below. Taken on Nexus 6 with Android 7.1.

<Page class="page"
  xmlns="http://schemas.nativescript.org/tns.xsd"
  navigatingTo="navigatingTo"
  xmlns:lv="nativescript-telerik-ui/listview"
  >
  <ActionBar title="Demo">
  </ActionBar>

  <StackLayout>
    <lv:RadListView id="listview" height="100%" items="{{ source }}">
      <lv:RadListView.listViewLayout>
        <lv:ListViewLinearLayout scrollDirection="Vertical"/>
      </lv:RadListView.listViewLayout>
      <lv:RadListView.itemTemplate>
        <GridLayout rows="auto" columns="85, *" class="row">
          <Image col="0" src="~/image.png" stretch="aspectFill" class="logo" />
          <StackLayout col="1">
            <Label text="{{ title }}" height="auto" class="title" textWrap="true" />
          </StackLayout>
        </GridLayout>
      </lv:RadListView.itemTemplate>
    </lv:RadListView>
  </StackLayout>
</Page>

import { EventData, Observable } from 'data/observable';
import { Page } from 'ui/page';

export function navigatingTo(args: EventData) {
    let page = <Page>args.object;

    var obs = new Observable();
    var array = [];
    for (var i = 0; i < 50; i++) {
        array.push({ "title": "title" + i });
    }
    obs.set("source", array);
    page.bindingContext = obs;

}

Page.page .row .logo {
    width: 70;
    height: 70;
    vertical-align: center;
    horizontal-align: left;
    border-radius: 20;
}

@import 'nativescript-theme-core/css/core.light.css';

$ tns info
All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component        │ Current version │ Latest version │ Information   │
│ nativescript     │ 3.0.3           │ 3.0.3          │ Up to date    │
│ tns-core-modules │ 3.0.1           │ 3.0.1          │ Up to date    │
│ tns-android      │ 3.0.1           │ 3.0.1          │ Up to date    │
│ tns-ios          │                 │ 3.0.1          │ Not installed │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

$ cat package.json 
{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.ListViewImageBackgroundBug",
    "tns-android": {
      "version": "3.0.1"
    }
  },
  "dependencies": {
    "nativescript-telerik-ui": "^2.0.1",
    "nativescript-theme-core": "~1.0.2",
    "tns-core-modules": "~3.0.0"
  },
  "devDependencies": {
    "babel-traverse": "6.24.1",
    "babel-types": "6.24.1",
    "babylon": "6.17.2",
    "lazy": "1.0.11",
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-typescript": "~0.4.0",
    "typescript": "~2.2.1"
  }
}

[tsonevn]

Hi @sserdyuk,
If I understand correctly the issue, you setting border-radius to the Images and while scrolling the radius has been reset. I tested this scenario on my side, however, was unable to reproduce it.
It would help if you could send us the whole project while including the image.
Meanwhile, you could also verify, whether you will have the same problem while setting the radius in the XML. For example:

<Image borderRadius="20" col="0" src="~/img/image2.png" stretch="aspectFill"  />

[sserdyuk]

@tsonevn Here's the project https://github.com/sserdyuk/ns-listview-border-bug

The bug is pretty visible on the 7.1 device, but I also have an older 4.4.2 test device, and it's not showing the same issue. Might be a difference in speed of hardware or Android API version.

Setting the radius in the XML itself makes no difference.

[sserdyuk]

@tsonevn I've added another "slow-mo" video to the repository that clearly displays what's happening on scroll.

[sserdyuk]

@tsonevn Another difference at play might be pixel density. The issue is present on Nexus6, which is xxxhdpi, and the other phone is not.

[tsonevn]

Hi @sserdyuk,
Thank you for the attached sample project.
I build the project on my side on Android Device API level 25 and was able to reproduce this behavior.
I also found that this problem could be reproduced with pure NativeScirpt ListView.
This issue might be related to the applying the style of the component, however, we will investigate further this problem.
For more info, you could keep track on the issue.
Archive.zip

[sserdyuk]

@tsonevn I don't see the bug tag nor the severity one. Is this scheduled to be fixed?

[tsonevn]

Hi @sserdyuk,
I missed changing the label of the issue.
Regarding the question, this problem is still under review.

[PanayotCankov]

This is an "Image" issue, when you replace the Image with:

<GridLayout col="0" stretch="aspectFill" class="logo" backgroundImage="~/image.png" />

it work like a charm.
It may be a good idea to abstract the background drawing mechanism for the CSS and reuse it in a custom Image class.

[sserdyuk]

Sorry. Clicked the wrong button.

[PanayotCankov]

We are applying the corner radius as complex clipping added to the canvas. The fix we will attempt is to draw the images using the canvas api similar to the way we draw css background.

PRs:

• Implement non uniform border corner radiuses and fix blinking image-view radiuses tns-core-modules-widgets#103
• Implement non uniform border corner radiuses and fix blinking image-view radiuses #4573

There are 3 additional tests:

• css > non-uniform-radius
• image-view > mode-matrix
• image-view > stretch-modes

It should now be possible to draw a CSS border using non-uniform corner radiuses and non-uniform border widths in Android as long as the border color is uniform.

[PanayotCankov]

As a side effect the android image view now applies antialiasing when drawing rounded images.

[PanayotCankov]

We have found some issues that should be fixed:

• iOS when non-uniform corner radii are set but without border, the view is not clipped
• When background images is set in CSS but the image can not be found, an Error is thrown with undefined is not an object
• In iOS when background-image is set but the resource can not be found it was not drawn, but the background-color was not drawn either.

And these two, won't be fixed as part of this issue, but we will keep them in mind:

• iOS image view does not offset its background image with the size of its border
• iOS image view does not apply rotation from ImageSource

[SvetoslavTsenov]

The fix is already available with tns-core-modules@next and will be officially released with tns-core-modules@3.1.1. If you still experience some issues related to the topic feel free to contact us. Any feedback will be highly appreciated.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.