Kendo Grid column handle problem

When double clicking on the resize handle of all columns beyond 15, it behaves weird (weird scroll, sizing done on the opposite way)

by Nicking

HTML

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/column-virtualization">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.802/styles/kendo.default-ocean-blue.min.css" />

    <script src="https://kendo.cdn.telerik.com/2022.2.802/js/jquery.min.js"></script>
   
    <script src="https://kendo.cdn.telerik.com/2022.2.802/js/kendo.all.min.js"></script>


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



</body>
</html>

CSS

th:nth-child(n+15) {
  background-color: red;
  color: white;
}

.k-resize-handle {
  /*background-color: green;*/
}

JavaScript

$(function() {
            let columns = [];
            let data = [];
            let numberOfColumns = 35;
            let numberOfRows = 10;
            let row, field, props;
               
            for (let i = 1; i <= numberOfColumns; i++) {
                field = ("Field" + i);
              	props = { field: field, title: field, width: 100 };
                
                if(i == 1){
                	props.locked = true;
                  props.headerTemplate = "<b>Locked</b>"
                }
                              
                columns.push(props);
            }
            
            for (let i = 1; i <= numberOfRows; i++) {
                row = {};
                
                for (let j = 1; j <= numberOfColumns; j++) {
                    field = ("Field" + j);
                    row[field] = "Row" + i + ":Column" + j;
                }
                
                data.push(row);
            }

           let dataSource = new kendo.data.DataSource({
               pageSize: 10,
               data: data
           });
           let i = 0;
           $("#grid").kendoGrid({
               dataSource: dataSource,
               resizable: true,
               width: 1000,
               columns: columns,
             	 scrollable: { virtual: "columns" },
               // Workaround
               dataBound: function(e) {
                  return;
                  let grid = e.sender;
                  grid.resizable.draggable.bind("drag", function(ev){
                                        //console.log(ev.target);

                    if(!ev.target.matches(".k-grid-header-locked th"))
                    	return;
                    
                    kendo.resize($("#grid"), true)
                  });
               }
           });
           
        });