CSS Sticky position not working properly on mobile

Question

I have a button on my OpenCart (2.3.0.2) website with a sticky cart button. The idea is that there is only one page to order from (Just a few sandwiches, no categories and product page needed) so I added a cart button that stays on the top right of the page:

#cart {
    position: fixed;
    top: 0;
    right: 0;
}

This works on the desktop site but on mobile I get the following when scrolling: As you can see on the top right, the button scrolls up a bit. After this the button scrolls with the page.

Are there any fixes for this issue?

Answer 1

#cart {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  right:0;
}

Have you tried position sticky rather than fixed?

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Answer 2

This is related to the issue at Position fixed on chrome mobile causing element to move on scroll up/down

Solution:

<meta name="viewport" content="minimum-scale=1">