Currently I am facing an issue as a web developer inside the beta versions of iOS 15 Safari.
As of now (beta 3) using simulator iPhone 12, (no device available), when creating a footer fixed at the bottom of the page with the suggested applied padding for the bottom safe area:
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom)
In the state where the Safari tab bar is visible, the actual footer appears above where it renders on screen. This in essence makes the footer not tap-able.
Youtube and other sites have already implemented the safe area, so I will share a screenshot from there.
You can see that the blue area is where Safari thinks the element is and the green area is the padding and the element is rendering there. You can tap inside the blue area and trigger the buttons in the footer.
Is this a Safari bug or expected behaviour?
Do we know if this might be fixed?
Failing all that, any work arounds?
Any comment or discussion on this would be appreciated, and if I have just made a simple mistake would be grateful to know :) Thanks!