The fixed element has the following style properties:

position: fixed;
top: 0;
right: 0;

It is supposed to remain fixed to the top-right corner, as it does on desktop browsers (Chrome, Safari).

However, on iOS Safari (16.1.1), when scrolling, the element disappears or jumps unexpectedly. After scrolling, it reappears in correct position. See video: https://drive.google.com/file/d/17UFcgFiHh8UANGJqy8S5RZjTWeqnSR3T/view?usp=sharing.

This issue only happens when element is positioned relatively to top: no issue when positioning element relatively to bottom.

The issue also happens when setting the Safari address bar to top of screen instead of bottom.

I have tried, without effect, the transform: translate3d(0px,0px,0px) hack on the fixed element and its children (iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops).

CodePudding user response：

The problem was due to the fixed element being a child of an absolutely positioned element. I moved the fixed element out of its parent and it fixed the problem.