Home / IOS Development / css – iOS / iPad + Safari: Vertically and horizontally sticky positioned cells that show jerky effect

css – iOS / iPad + Safari: Vertically and horizontally sticky positioned cells that show jerky effect



I have a table, not the HTML table, but the one made of React-styled divs, where the top 4 row cells are sticky, also the 2nd, 3rd and 4th row cells are replaced by the replacements when corresponding datasets are available through vertical scrolling, as shown in gif, that is why the “fixed”

; position can not be used. The first two columns in this table also consist of tacky cells, as shown, to perform horizontal scrolling with the two columns fixed.

The problem is when horizontally scrolling in the iPad, the 8 cells in the upper left corner, move slightly horizontally from their places and are repositioned when you scroll (or touch, in case the iPad) is released, which creates a bad effect. However, this effect is somewhat minimal on iOS Safari and works properly in Chrome / FF.

enter image description here

Here is the css for one of these cells at the top left:

.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);
}


Source link