Buttons hiding under menu bar Iphone X

0
Anyone else experiencing difficulties with Iphone X? Since a couple of days, users experience that buttons are misplaced on Iphone X. We have a menu bar on the bottom of the app that is always visible. On one page, we calculate the height and have 2 buttons on the bottom. It works fine, but not anymore on Iphone X specifically. The buttons are hiding below the menu bar. In landscape mode, the buttons are visible. How to fix this? It is about the buttons '’vorige week'’ and '’volgende week'’ We calculate the height of the page using: .agenda-container-mobiel{   overflow:auto;   height: calc(100vh - 269px);   scroll-behavior: smooth;} The buttons have: .rooster-pagination-mobiel{         position: fixed;     bottom: 51px;     right: 0px;         left: 0px;} We used a trick to go back one week. Is using pagination, but adding a button '’vorige week'’ on top of the pagination. So the '’volgende week'’ button is from the pagination and the '’vorige week'’ button is en seperate button styled the same way on top of the pagination. But it seems on Iphone X that the menubar is on top of the buttons, so the height is miscalculated on Iphone X. Thanks in advance.
asked
1 answers
0

Hi Lisa, to calc the height you might want to add the CSS environment variables for iOS, i.e. env(safe-area-inset-bottom) for virtual home button and env(safe-area-inset-top) for the top notch. See https://medium.com/@draganeror/iphone-x-layout-features-with-css-environment-variables-d57423433dec

 

answered