Listgrid freezefield Issue - misaligned rows with cell borders

[jj_kbs]

I have been trying to solve this issue the past week while combing through the documentation and this forum and I had no luck.
My feeling on the issue is that either there is an really obvious solution or my case just does not work.

The Issue: See the Attached image

Steps tried:
1) I have updated to the newest nightly build 4th Dec. 2019
2) I have tried many suggestions from the forums
3) I have tried the settings pointed out in the documentation "canFreezeFields"
4) I have tried making the Page scroll instead of the Listgrid (so the whole listgrid is displayed but you have to scroll the website instead of having the scroll inside the grid)

I will attach a seperate test case when i have prepared it but it might just be

My listgrid uses these settings - The commented out parts were there for testing
I also use "getCellCSSText" THIS SEEMS TO BE THE ISSUE!!!!

    width:"100%",
    heigth: "100%",
    cellAlign: "center",


    //enforceVClipping: true,
    //autoFitData: "both",
    //bodyOverflow: "scroll",
    //fixedRecordHeights: true,
    //recordComponentHeight: 20,
    //showRecordComponents: false,
    //cellHeight: 20,

    shrinkForFreeze: true, 
    autoFitHeaderHeights: true,
    autoSizeHeaderSpans: true,
    showHeaderMenuButton: false,


    groupStartOpen: "all",
    showGroupSummary: true,

    canSelectCells: true,
    canDragSelect: true,
    selectionType: "multiple",

    contextMenu: gridMenu,

    canEdit: false,
    canMultiSort: false,
    showHover: false,
    alternateRecordStyles: false,
    autoDraw: false,

I freeze the fields after the fact

    user_grid.setDataSource(ids);
    user_grid.fetchData();
    user_grid.freezeField("name")
    user_grid.freezeField("grp")
    user_grid.groupBy("grp");

getCellCSSText code:
I identified that this part creates the issue
Is it possible to have borders on top and bottom without frozen fields going haywire

getCellCSSText: function(record,row,col) {
        var compose = "";



        if(record[f_title+"ag"] != record.grp) {
            var isnum = /^\d+$/.test(f_title);
            if (isnum) {
                //console.log(record[f_title]);
                if (typeof record[f_title] !== "undefined") {
                    compose += "border-top: 2px solid pink;";  
                    compose += "border-left: 2px solid pink;";  
                    compose += "border-right: 2px solid pink;";  
                    compose += "border-bottom: 2px solid;";
        return compose;
    }

[Isomorphic]

If your border and padding sizes are not the same between cells in the same row or column, some browsers (especially IE) will misalign cells. So you need to create, for example, 2px white (or transparent) borders if elsewhere you will have 2px colored borders.