[Solved] Kendo grid / datepicker style bug with Chrome 36.0.1985.125 +

[Myles]

Go to the following Kendo demo (custom filter in grid):

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

Open the filter on the birth date column.  Move the mouse randomly over the dates in the drop down calendar.  Notice that after moving off the date cells you will see random lines left over.  See attachment.

We have noticed this behavior since upgrading to Chrome 36.0.1985.125.  The problem can also be replicated on the latest version of Chrome (37).

Is this a known bug?

Myles

[Myles]

Attachment

[Dimo]

Hello Myles,

Such glitches are often caused by incorrect subpixel rendering of the browser. They can be triggered by:

- a specific font size
- specific spacing styles (e.g. padding) defined in non-pixel units (e.g. em's)
- the exact place of the widget on the page

As a result, the issue can occur on a random basis and can be difficult to resolve universally for all scenarios. As you can see, the problem is even not exhibited in all online demos.

Please add the following CSS rule in your application, after the Kendo UI stylesheets, and see if it resolves the issue. If not, first try some other values, e.g. 1.9em, 1.7em, etc.

.k-calendar .k-content .k-link {
   min-height: 1.8em;
   line-height: 1.8em;
}

Regards,
Dimo
Telerik

 

 

[Myles]

Hi thanks for your response.  I have to disagree that this issue is random.  You can replicate it every time when using a datepicker control embedded in a custom grid filter.

I have tried your style fix with a variety of values with no success.

Regards

Myles

[Dimo]

Hello Myles,

The issue is random in terms that it depends on the causes outlined earlier, but is not reproduced on all pages and in all scenarios. Of course, it is reproduced consistently in specific scenarios, when the suitable prerequisites exist.

Here is a video, which demonstrates how the issue is reproduced in a Grid in our online demos, but is not reproduced with the same Grid on a different page:

http://screencast.com/t/lZPBsyrsg

Here is another video, which shows how changing the padding of the anchors inside the calendar resolves the issue:

http://screencast.com/t/7uXcYm4S

Make sure that the custom padding styles that you are adding, are actuallly applied.

Regards,
Dimo
Telerik