Resizing of Grid Columns Is Not Working in Chrome When the Page Is Zoomed

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	Created with version 2017.3.913

Description

When the scale is not 100% or when I zoom the page, the column resize feature of the Grid does not work in the latest Chrome version.

Solution

1. Override the internal positionColumnResizeHandle method. 
2. Test that all enabled features work as expected in your environment.

<div id="example">
      <div id="grid"></div>

      <script>

        kendo.ui.Grid.prototype._positionColumnResizeHandle= function() {
          var that = this,
              indicatorWidth = that.options.columnResizeHandleWidth,
              lockedHead = that.lockedHeader ? that.lockedHeader.find("thead:first") : $();

          that.thead.add(lockedHead).on("mousemove" + ".kendoGrid", "th", function (e) {
            var th = $(this);
            if (th.hasClass("k-group-cell") || th.hasClass("k-hierarchy-cell")) {
              return;
            }
            that._createResizeHandle(th.closest("div"), th);
          });
        };

        $(document).ready(function() {
          $("#grid").kendoGrid({
            dataSource: {
              transport: {
                read: "https://demos.telerik.com/service/v2/core/Orders"
              },
              schema: {
                model: {
                  fields: {
                    OrderID: { type: "number" },
                    ShipCountry: { type: "string" },
                    ShipCity: { type: "string" },
                    ShipName: { type: "string" },
                    OrderDate: { type: "date" },
                    ShippedDate: { type: "date" }
                  }
                }
              },
              pageSize: 15
            },
            height: 550,
            sortable: true,
            resizable: true,
            pageable: true,
            columns: [
              {
                field: "OrderDate",
                title: "Order Date",
                width: 120,
                format: "{0:MM/dd/yyyy}"
              },
              {
                field: "ShipCountry",
                title: "Ship Country",
                minResizableWidth: 100
              },
              {
                field: "ShipCity",
                title: "Ship City"
              },
              {
                field: "ShipName",
                title: "Ship Name"
              },
              {
                field: "ShippedDate",
                title: "Shipped Date",
                format: "{0:MM/dd/yyyy}",
                width: 200
              },
              {
                field: "OrderID",
                title: "ID",
                width: 80
              }
            ]
          });
        });
      </script>
    </div>