List item border rendering issue

[RES]

Can someone tell me why this happens (see attached files) with the bottom border on list items in some browsers?  Apparently in this case it appears to happen in Chrome.  Dolphin and Firefox seem to fine on Android anyway.

Scott

[Kamen Bundev]

Hello,

We've seen this issue on a desktop Chrome, but we couldn't reproduce it on a mobile device. Can you send a sample page and steps to reproduce the issue, so that we can test it and help you fix it. Thank you in advance.

Regards,
Kamen Bundev
Telerik

 

 

[RES]

Okay I've worked up an example that reproduces the issue.  The example includes the CSS rules I'm overriding in my app so you can see what's happening.  Even if I remove the overridden styles many of the horizontal lines in the list view are really thin and are almost invisible.  I'm testing in Chrome on a Nexus 4 device and you can also reproduce the issue in desktop Chrome running the Nexus 4 emulation mode in addition to many other Android emulation modes.  You can view the example here.

http://example.rengr.co

[Kamen Bundev]

Hello,

Thanks for noticing this. It looks like a rendering bug in Chrome, which also depends on the devicePixelRatio of the target device. I will investigate the issue and get back to you with more information and a fix or workaround until the end of the day. I've also updated your points for the find.

Regards,
Kamen Bundev
Telerik

 

 

[Kamen Bundev]

Hello,

I think I've found the problem - seems Chrome doesn't cope well with subpixel rendering of borders, even though their widths are specified in pixels. I've found a simple workaround for this - add this CSS rule to your page to fix it:
.km-root
{
    font-size: 1em;
}

Keep in mind that this will resize the whole page a bit. Meanwhile we will try to fix this issue properly in Kendo UI for the next service pack.

Let me know if this helps.

Regards,
Kamen Bundev
Telerik

 

 

[RES]

It does fix the issue in the above example.

http://example.rengr.co/home/workaround

However I have still have another example where it doesn't work, I'll work on reproducing that example.

[RES]

Okay here is another example using the mobile ListView that recreates the border rendering problem.

http://example.rengr.co/home/form

You'll notice that the lines actually appear and disappear as you scroll.  I've also created another example that uses "15px" as the overridden font size and the bordering rendering issue goes away altogether.

http://example.rengr.co/home/form2

What I don't understand is that "1em" equals "16px" correct?  So why wouldn't "1em" work since that is equal to a whole pixel value thus avoiding a subpixel value?  Even if you substitute "16px" for "1em" in this example the problem still persists.  I guess my other question is why does the font size even have an effect on how borders are rendering to begin with?

[Kamen Bundev]

Hi,

I found a better fix that should avoid both issues - again CSS transforms are to blame, as usual on Android. You only need to add this CSS to fix the issue:
.km-on-android.km-flat .km-listview-wrapper
{
    -webkit-transform: none;
}

Check the modified page here and let me know if it works for you.

Regards,
Kamen Bundev
Telerik

 

 

[Kamen Bundev]

Hi,

There is another issue - this fix should only be applied to Chrome, as it would break ListView scrolling in older Android 4 browsers (or Dolphin), so better use this one instead:
.km-android4.km-ios-chrome .km-listview-wrapper
{
    -webkit-transform: none;
}

This would only apply it in Chrome for Android 4. I know the Chrome class is confusing, but it was added to fix an issue in Chrome for iOS.

I will also add this fix in Kendo UI, as there are several more things that would get fixed in Chrome by this.

Regards,
Kamen Bundev
Telerik

 

 

[RES]

Yes, this CSS rule also appears to solve the problem.  Question though were does the .km-android4 class live as I don't see it in the CSS file?  Also I can assume this fix will be included in the next release so I can sunset the overrides?  Thanks, for your help.

[Kiril Nikolov]

Hi,

The fix should be available with the next build. I can see that it was posted in the open - source repo as well:

https://github.com/telerik/kendo-ui-core/commit/e528d7eb49371caaf0caf3860ad3e15332ec07e0

Regards,
Kiril Nikolov
Telerik

 

 

[Prem]

Hi Kiril,

Is this issue fixed? We seem to have a similar/same issue when scrolling the navigation drawer or some pages. In Chrome Android it seems to skip some list items when scrolling, and it renders it or redraws it when you hit the top or bottom.

Will your workaround above fix it?

Prem

[Kiril Nikolov]

Hello Prem,

It should be fixed with the latest builds. If not then please open a separate support request with a sample demo showing the issue and we will be happy to help.

Regards,
Kiril Nikolov
Telerik