Website Registers Clicks Lower Than Actual on iPad Safari

[qappell]

bug description

When the user clicks on the screen, the click will be registered lower than where the finger actually clicks (e.g. if B is below A and I click on A, the website will think I clicked B). I have discovered two conditions that allow for this behavior to arise: by using the tab bar or using the keyboard. The issue only triggers when the user clicks a menu button on the sidebar and then when the page looks like this after clicking the button:

...but not like this where the entire viewport is filled (and clicking on the buttons works fine):

reproduction steps

First, go to cobalt.tools on an iPad with Safari and have the separate tab style enabled in Safari's settings (zoom level of webpage does not matter)

Tab bar method

1. Swipe up to "minimize" the tab bar
2. Click it to drop the tab bar back down
3. Click to a different menu on Cobalt's sidebar once and then twice. The first click registers correctly, but then all clicks after will be shifted down.

Keyboard method

1. Click on the input box to bring up the iPad's on-screen keyboard
2. Hide the keyboard by either pressing the button on the keyboard or clicking on a blank area of the webpage.

(Very interestingly, you can optionally refresh the page once and continue with this last step.) Finally, click one of the menu buttons on the left sidebar.

screenshots

Video showing issue (sorry that I recorded with my webcam)
https://drive.google.com/file/d/1ATw-ddW2ckW3yhPsZ59q2HPs1zX2qL6M/view

links

No response

platform information

Safari 18.1.1 on iPadOS 18 (9th gen iPad)

additional context

I can do further testing and answer any questions (especially if you don't have an iPad that you can reproduce this on).