iOS/iPad + Safari: Vertically and horizontally sticky positioned cells showing jerky effect

I have a table, not the HTML table, but the one made of React styled divs, in which the top 4 row cells are sticky positioned, also 2nd, 3rd and 4th row cells are replaced by their replacers when corresponding data set is accessed through vertical scrolling, as per shown in gif, thats the reason why "fixed" position cannot be used. The first 2 columns of this table also consist of sticky cells, as shown, to effect horizontal scrolling with those 2 columns fixed.

Issue is when horizontally scrolled in iPad, the 8 cells in top left corner, move a bit horizontally from their places and are repositioned when scrolling (or touch, in case of iPad) is released, which creates a bad effect. However this effect is somewhat minimal on iOS Safari and works properly in Chrome/FF.

Here is css for one of those top-left-corner cells:

.efVzif.efVzif {
    white-space: pre-wrap;
    vertical-align: text-top;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--background-white);
    display: inline-block;
    font: var(--typography-body3);
    -webkit-letter-spacing: var(--label-typography-letter-spacing);
    -moz-letter-spacing: var(--label-typography-letter-spacing);
    -ms-letter-spacing: var(--label-typography-letter-spacing);
    letter-spacing: var(--label-typography-letter-spacing);
    color: var(--black);
    text-transform: none;
    width: 160px;
    height: calc(100% - 2px);
    position: -webkit-sticky;
    left: 156px;
    /* right: 0px; */
    z-index: 2;
    padding: 5px 10px 0 10px;
    text-align: left;
    box-shadow: 8px 0 5px -3px rgba(133,146,166,0.2);
}

from iOS/iPad + Safari: Vertically and horizontally sticky positioned cells showing jerky effect