Streaming live at 10am (PST)

Fixed Position Auto Value Not Working on iPad

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

Hi @nickonebox,

Thanks for your response, I am not sure why this is happening on the iPad lower iOS version, it might be some update made in iOS/Safari, however on a newer iPad running iOS 12 rendered the layout as expected: https://share.getcloudapp.com/7Ku07OO4

So it seems to be device dependent on that particular styling. Sometimes having Filters or Transitions set can cause resets in z-index during a transform, it could be this is happening on the earlier iOS/Safari version is running.

Hi @cyberdave thank you so much for taking the time to look at this it’s much appreciated.