I’m building a website landing page that uses a set of fixed position elements. On desktop, mobile landscape and mobile portrait the green square (with all fixed position values set to auto) is centred within the respective viewport.
However when I test this on an iPad, to check tablet view, the box is aligned to the top edge of the screen and I can’t understand what is causing this? The iPad is relatively old and only uses iOS 10.3.5 and I wondered if this is what is causing the compatibility issue?
If I give a specific value to the fixed positioning either in pixels, vw, vh etc. then the position behaves as expected so the issue only seems to affect auto position value within fixed. I have also tried using absolute positioning and the same problem occurs.
As there are a number of boxes which animate from behind the green box and require the z axis, static positioning doesn’t seem to be a realistic option, but I am relatively new to this, so I welcome any advice.
Below I’ve provided links to the live staging site, the read only and a couple of image links showing the issue on the iPad.
Link to Published Staging Site: one-box.webflow.io
Here is my site Read-Only: https://preview.webflow.com/preview/one-box?utm_medium=preview_link&utm_source=designer&utm_content=one-box&preview=3408d35cc8460085c7eefe7c8b6b0b50&mode=preview
