Bug Found in Rendering of Switch - Off by 1px

[Christopher]

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.

[Christopher]

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)}

[Atanas Georgiev]

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

 

 

[Christopher]

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. 

[Christopher]

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. 

[Vasil Yordanov]

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

 

 

[Christopher]

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!!!

[Vasil Yordanov]

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

 

 

[Christopher]

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!!

[Vasil Yordanov]

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

 

 

[Christopher]

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

[Iliana Dyankova]

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