5

Issue

If you open a modal (position absolute or fixed) when bottom navigation is collapsed, bottom navigation area remains with empty area. I think the area is browser area, so there is no way to get rid of the area by css or javascript.

Is there any way to remove the empty area?

  • I set body position to fixed to prevent body scroll. It seems to occur when body position is fixed

Safari-15 bottom navigation area issue video

Song
  • 87
  • 1
  • 6

1 Answers1

3

i had the same issue.I use bootstrap (4.1v) and set

.modal .modal-dialog-centered {
        min-height: 100vh;
}

and

html,body{
height:100vh;
}

Thats fix my issues with modals in IOS.

Todor Markov
  • 507
  • 5
  • 12
  • 1
    Sadly, it is not working for me – Song Sep 28 '21 at 06:09
  • 1
    html,body{ height:100vh; } .modal-dialog{ min-height: 100vh; height:100% } check if the css styles are not overwritten. If necessary put! important. I am sure you have to use height: 100vh to fix the problem – Todor Markov Sep 28 '21 at 06:17
  • Oh with html height 100vh it work!! Thx! – Song Sep 28 '21 at 06:24
  • Could you please tell me why this setting solves the problem? – Song Sep 28 '21 at 06:39
  • The modal doesn't animate accordingly with the Safari bottom bar, so it makes an ugly jump after the bottom bar disappears. – Fred K Oct 25 '21 at 09:34