List item border rendering issue

13 posts, 1 answers
  1. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 02 Jul 2014 Link to this post

    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
  2.
  3. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 04 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 09 Jul 2014 Link to this post

    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
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 14 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 15 Jul 2014 in reply to Kamen Bundev Link to this post

    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.
  13. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 16 Jul 2014 in reply to Kamen Bundev Link to this post

    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?

  14.
  15. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 17 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  17. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 17 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  19. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 22 Jul 2014 in reply to Kamen Bundev Link to this post

    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.
  20.
  21. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 24 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  23. Prem
    Prem avatar
    3 posts
    Member since:
    Dec 2014

    Posted 13 Dec 2014 in reply to Kiril Nikolov Link to this post

    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
  25. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 15 Dec 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  26.
Back to Top