I'm having some difficulties trying to avoid an undesired scrolling effect in CSS.
The fact is that I'm using position: sticky and position: -webkit-sticky for a site and I've noticed that on iOS browsers (including Firefox and Safari) and on desktop with Safari the positioning of sticky works just fine, but while scrolling down it gets some strange flickering on the sticky element, like if it's going down for a moment and then it gets back on top positioning sticky.
I'm linking a gif to show you the problem. Link to gif
Is there a solution to this? Maybe some touch classes that has to be added on the sticky container?
Thanks
EDIT
This is the code.
I have one major container named container with there properties:
height: 100vh;
-webkit-overflow-scrolling: touch;
then an inner section named area:
-ms-overflow-style: none;
position: sticky;
position: -webkit-sticky;
top:0;
-webkit-overflow-scrolling: auto;
then an inner-section inside the area:
height: 2000px;
