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

Published

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.

enter image description here

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

Source: Ios Questions

Published
Categorised as css, ios, ipad, safari, sticky Tagged , , , ,

Answers

Have you tried changing the overscroll-behavior to none? If not, add this to your CSS and see if it helps.

body {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    webkit-overscroll-behavior: none;
    webkit-overscroll-behavior-y: none;
}

Prof. Kailyn Cremin

Leave a Reply

Your email address will not be published. Required fields are marked *

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq