If position:sticky; is not working for an element on IOS devices while it’s working on all other major operating system’s and browsers. Then I’ll tell you how to fix that.
First let me tell you why this happen at first place.
When you try to use sticky position for an element whose container is an inline element and not block-level element. For example, if you try to use position:sticky; for an element which is wrapped inside an <a> tag, then it will not work in IOS device. I don’t know why it still works on other operating systems including android.
So, to fix this you need to add property display: block; to an inline element which is an <a> tag in our case above.
Add following CSS properties to an inline parent element:
a{
display: block;
-webkit-position: sticky;
}
Sometimes, only -webkit-position: sticky; do the trick but the proper solution is above CSS.
I hope it will fix the issue of sticky postion not working in IOS device. Let me know if this solution help to fix your issue in the comments section below.