Bug Found in Rendering of Switch - Off by 1px

12 posts, 0 answers
  1. Christopher
    Christopher avatar
    7 posts
    Member since:
    Mar 2013

    Posted 21 Apr 2015 Link to this post

    Hello, I found a bug with the rendering if the switch. It renders off by exactly one pixel. 

    Please see the attached image. The top switch has the fix in place, the bottom one does not. You'll notice the underside shows one pixel column on the right.

    The javascript was rendering the km-switch-handle class with an inline transformX, for 37px. It needs to be 38px to cover up the underside of the switch fully.

    To fix this, I edited kendo.all.min.js. I replaced this line:

    function(e){var t=this;t.position=e,t.handle.css(f,"translatex("+e+"px)"),t._animateBackground&&t.background.css(d,t.origin+e)}
    with this line:

    function(e){var t=this;t.position=e,t.handle.css(f,"translatex("+(e+1)+"px)"),t._animateBackground&&t.background.css(d,t.origin+e)}

    However, while this fixed it when the switch was in the "on" state, it now has broken it by one pixel when the switch is in the "off" switch (see second attachment). Is there a permanent fix I can implement?

    Thanks!!
    -Chris

     P.S. the only modifications I made to the default moonlight css is to change the on/off colors. Everything else is unchanged.

  2. Christopher
    Christopher avatar
    7 posts
    Member since:
    Mar 2013

    Posted 21 Apr 2015 Link to this post

    Minor update: I was able to get it render correctly with the following modification. I do not know how this might affect other modules as I only use the switch.

    function(e){var t=this;var etemp=e;if (e > 1){etemp=e+1;}t.position=e,t.handle.css(f,"translatex("+etemp+"px)"),t._animateBackground&&t.background.css(d,t.origin+e)}

  3. Kendo UI is VS 2017 Ready
  4. Atanas Georgiev
    Admin
    Atanas Georgiev avatar
    126 posts

    Posted 23 Apr 2015 Link to this post

    Hello Christopher,

    As far as I see the issue is not reproducible in our online demo. We suspect that it may be due to custom styling applied or Switch widget border color coinciding with the background. Please create an isolated runnable example in Kendo UI Dojo, where the issue is present and we will be happy to take a look.

    Regards,
    Atanas Georgiev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Christopher
    Christopher avatar
    7 posts
    Member since:
    Mar 2013

    Posted 23 Apr 2015 in reply to Atanas Georgiev Link to this post

    Hi Atanas, thanks for the info! I took a look at your example, and the problem is shown there as well. You are correct it seems to be a border, but that's a bug, not a feature. You'll notice the switch border is supposed to be 1px, that additional border makes it 1px on the top and bottom, and 2px on the left and right, thereby ruining its balance and as a result makes it appear as though the switch isn't moved all the way to the left or right. I could change the border color, but that won't fix the extra column of pixels that shouldn't be there.

    It also doesn't explain why moving it 1px to the left or right hides the border - as that indicates part of the switch was hidden by 1px before. 

    To summarize: the switch should have a 1px border on three sides when in the on or off state. 
  6. Christopher
    Christopher avatar
    7 posts
    Member since:
    Mar 2013

    Posted 23 Apr 2015 in reply to Atanas Georgiev Link to this post

    Attached is a sample of what it looks like if I simply color the border to match at 2px width, along with a sample at 1px width.

    1px is the symmetrical - and correct - option. 

  7. Vasil Yordanov
    Admin
    Vasil Yordanov avatar
    43 posts

    Posted 27 Apr 2015 Link to this post

    Hi Christopher,

    Could you please send us the theme file you are using in order to test it on our side?

    Looking at the screenshots it seems that the problem is with padding of the km-switch-container (it has padding: 1px 0 1px 1px) and the width of the switch-handle being set in em and optimized for retina devices (1.6em in particular, which appears to render different pixels under Safari and Chrome).

    There should not be problems with respect to the border-width as the km-switch-container has the following CSS rules applied:

    .km-switch-container {
      box-sizing: border-box;
      border-width: 1px;
    }


    Regards,
    Vasil Yordanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Christopher
    Christopher avatar
    7 posts
    Member since:
    Mar 2013

    Posted 27 Apr 2015 in reply to Vasil Yordanov Link to this post

    Hey Vasil, attached is the moonlight mobile min css file. The only changes I made to it were to adjust the color of the on/off switch to green and red. The rest, namely the design/layout of the switch itself, is untouched.

    I made the modification to adjust the layout in javascript only, as detailed above.

    Thanks!!!
  9. Vasil Yordanov
    Admin
    Vasil Yordanov avatar
    43 posts

    Posted 29 Apr 2015 Link to this post

    Hello Christopher,

    We've checked the theme file and everything looks fine. The one extra pixel you are seeing is due to the dimensions being set in em and the way the browser interprets them. In order to achieve exact pixel rendering please make sure that the switch widget has font-size: 12px; using the following CSS:

    .km-switch {
      font-size: 12px;
    }

    Take a look at the attached image to see how the Switch renders in Chrome with different font-sizes.

    In addition, could you share which browser and browser version you are testing with? We will further investigate, if we can make this work as expected for all supported web browsers, no matter what the font size is, as the current version is extensively optimized for mobile.



    Regards,
    Vasil Yordanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Christopher
    Christopher avatar
    7 posts
    Member since:
    Mar 2013

    Posted 30 Apr 2015 in reply to Vasil Yordanov Link to this post

    Thanks for the update! I haven't had a chance to play with too many variations with the CSS, but I wanted to shoot you guys a reply.

    I'm testing with Chrome on a 30" 2560x1600 monitor, as well as various retina Android devices like the Nexus 7, Galaxy Note 4, and LG G3. 

    With my hacks in place that I detailed above, it renders correctly on all devices. I do agree the em is the issue, so I'm wondering if it makes sense to change the border to a fixed width of 1px instead of em? The browsers all do a good job of adjusting that border with for the various screen types, and the rendering stays consistent (unlike text).

    Will reply with more as I do more testing with CSS variations..

    Thanks!!

  11. Vasil Yordanov
    Admin
    Vasil Yordanov avatar
    43 posts

    Posted 04 May 2015 Link to this post

    Hello,

    Thank you for the details, Christopher. Actually, the border has width: 1px. It is the padding being set in em that triggers the wrong rendering. We will make sure to have this fixed with the next official Kendo UI release due in June.

    Regards,
    Vasil Yordanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Christopher
    Christopher avatar
    7 posts
    Member since:
    Mar 2013

    Posted 04 May 2015 Link to this post

    Great, thanks Vasil! If you guys have a beta along the way you'd like me to test, please let me know and I'll do so. My hack works 100% of the time, but again I have no idea what impact it's having on other Kendo UI tools, and we'll be using more and more of those going forward.

    (Also as a side note: I neglected to mention in my posts above that the switches are being placed in a container div with float: right. I note this here in case it helps you debug/test.)

    Thanks!!

    -Chris

  13. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 06 May 2015 Link to this post

    Hi Chris,

    Thank you for the details. We logged this issue for further investigation and fixing - you could track its progress here

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready