sap.m.Page's footer ignores safe-area-inset-bottom

[HappyHepo]

OpenUI5 version: 1.120.1

Browser/version (+device/version): Safari, iPhone XS Max iOS 17.1.1

Any other tested browsers/devices(OK/FAIL): Safari, iPad Mini 2021 FAIL

Steps to reproduce the problem:

1. App with Page with footer
2. Have the safari controls not on the bottom but only the gesture bar (iPad without Homebutton, iPhone without Homebutton in Landscape)

What is the expected result? The footer leaves space for the safe area

What happens instead? The footer occupies the safe area making it hard to hit buttons when they are behind the gesture bar

Any other information? (attach screenshot if possible)

[aborjinik]

I used this page for testing but as you can see at the attachment i do not have any difficulty to press the bottom toolbar buttons. Could you please let us know your test page or what exactly was your difficulty? Probably a screen cast would help.

https://github.com/SAP/openui5/assets/6832576/6e8306ea-66bf-429f-99da-75c86f5f320d

[HappyHepo]

I got this image from my Colleagues: As you can see the gesture bar overlaps with the buttons in the footer bar, making it hard for the user to press the button without dragging the gesture bar

[aborjinik]

Ok, the touch area becomes smaller but I was able press the button. Anyway this should be clarified. Internal incident 2380138787 is created. You will be informed.

[stephania87]

Do these examples include a container like sap.m.App or any other settings that can provide some initial meta viewport settings for the page? Provide access to the deployed application, jsbin/jsfiddle/etc or else example with such valid top-most container for a test.

[HappyHepo]

Yes, all our apps are contained in an App element, see below minimal example

Example

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="my.Controller">
  <App id="app">
    <Page busy="{location>/loading}"  title="{i18n>Home.title}">
      ... Content
      <footer>
        <Toolbar>
          <ToolbarSpacer />
          ... More Buttons
          <Button text="{i18n>Request.send}" type="Emphasized" press="submit" />
        </Toolbar>
      </footer>
    </Page>
  </App>
</mvc:View>

[flovogt]

@HappyHepo any chance to provide a jsfiddle sample of your application, so we can easier debug your scenario?

[HappyHepo]

I could not figure out how it would work with jsfiddle, so I created a minimal stackblitz: https://stackblitz.com/edit/web-platform-c98hph?file=index.html

[stephania87]

My bad. I forgot this case. https://jsbin.com/ceyixiquci/edit?html,output -> with test URL https://output.jsbin.com/ceyixiquci

• rotate in landscape, if the address bar is configured to appear at the bottom --> the action handle is rendered on top if the display area (the footer in this example cannot be used properly)

If you test in Safari, on iPhone15, landscape, the front camera hides elements, and the action bar is on top of the display area as well. Yet a different device like Motorola edge 20 with Android cuts the display area on OS/device level, so the display area is not interrupted. Thus there is no common solution for mobile devices. Even for iOS devices the safe areas will be different if you use https://developer.mozilla.org/en-US/docs/Web/CSS/env My suggestions would be to redesign with consideration of the supported devices by using custom CSS. Or search for device setting that forces the display area to be limited on OS/device level.

A general question for research on the topic about safe areas of different mobile devices is moved to SAPUI5 development as well.

PS: The sap.m.App and core functionality add some default viewport settings, where not all of the settings will be respected in all iOS versions https://webkit.org/blog/7367/new-interaction-behaviors-in-ios-10/ Still the initial height will be of the viewport, which would be different per device. Property sap.m.Page.floatingFooter=true can provide some space, but the space is not designed specifically for iOS display settings https://openui5.hana.ondemand.com/api/sap.m.Page#methods/setFloatingFooter Additionally, your app is hosted in CF and depends on FLP container and viewport settings, so a possible redesign should consider that FLP elements are not in the scope of the app's CSS, but you can still try to add bigger margins via media queries for detected iOS devices only.