bug: Bad placement of the buttons in the bottom-navigation in iOS PWA mode

Open EzHeisenberg opened this issue 1 year ago • 12 comments

What version of daisyUI are you using?

v.2.51.5

Describe your issue

While developing a web application on iPhone in PWA mode, I used the Bottom-navigation component, I realized that there was a bad placement of the navigation buttons container when using the tag for iOS :

The <meta name="viewport" content="viewport-fit=cover"> is required for responsive of the bottom navigation in iOS.

here are some examples, we can see here that icons, texts or both not a good position

What browsers are you seeing the problem on?

Safari

Reproduction URL (optional)

No response

Apr 04 '23 05:04 EzHeisenberg

Can you give me a code example to test?
Also can you try increasing the height of btm-nav using a h-* tailwind utility class? I think your items are bigger than the available height.

Apr 04 '23 05:04 saadeghi

Of course, I used it in a basic case. but in the h-*

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="icon" href="">
    <meta name="viewport" content="viewport-fit=cover, width=device-width, height=device-height, initial-scale=1"/>
</head>
    <body>
        <div class="container mx-auto max-w-5xl p-4">
            <div class="text-sm breadcrumbs pb-4 text-gray-500">
                <ul>
                    <li>
                        <a href="#">Accueil</a>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="btm-nav ">
            <a href="{{ path('app_index') }}">
                <em class="fa-solid fa-house w-5 h-5"></em>
                <span class="btm-nav-label">Home</span>
            </a>

            <a href="{{ path('app_worksite') }}">
                <em class="fa-solid fa-cubes w-5 h-5"></em>
                <span class="btm-nav-label">Projets</span>
            </a>

            <a href="{{ path('app_fee') }}">
                <em class="fa-solid fa-ticket w-5 h-5"></em>
                <span class="btm-nav-label">Frais</span>
            </a>

            <a href="{{ path('app_user') }}">
                <em class="fa-solid fa-user w-5 h-5"></em>
                <span class="btm-nav-label">Profil</span>
            </a>
        </div>



    </body>
</html>

CSS

body{
    min-height: 100vh;
    background-color: #f4f4f4;
}

Apr 04 '23 05:04 EzHeisenberg

when I apply a h-* the height changes as expected, except that it doesn't look very nice because the elements are centered vertically and the bottom-navigation block looks big.

h-28

h-24

h-20

On the other hand, on Chrome browsers, brave... the expected behavior of the navigation bar is the right one

Apr 04 '23 06:04 EzHeisenberg

.btm-nav has this style padding-bottom:env(safe-area-inset-bottom); to make space for iOS "home bar" (that line on the bottom). without that padding, your menu items would go under that line so I think you should keep that padding. the value of padding is env(safe-area-inset-bottom) but you can change it using utility classes like pb-4 or pb-2 or anything. let me know if that fixes the problem for you.

Apr 04 '23 06:04 saadeghi

I'm seeing similar behaviour (using standard btm-nav) during scroll (when the home bar is not visible). Please see the screenshot. Do I need to somehow watch for window resize events and apply a new padding if the home bar is not visible? thanks

With home bar:

Without home bar:

May 11 '23 05:05 thobson

Strangely, the issue seems to be with the use of env(safe-area-inset-bottom) at least in the latest iOS version. Using pb-0 works for me.

May 11 '23 06:05 thobson

Hello, a possible workaround is to add h-auto to the parent div and a bit of padding in the children if necessary

before:

<div className="btm-nav z-50 bg-base-100 drop-shadow-sm">
   .......
</div>

after:

<div className="btm-nav z-50 bg-base-100 drop-shadow-sm h-auto">
   .......
</div>

May 25 '23 15:05 raphaelbadia

I'm having the same issue with my app when it's installed as a PWA on iOS. Using h-auto does not solve the issue for me. It only reduces the height of the navbar when the app is viewed in-browser. Adding top padding causes the nav indicator to render on top of the nav items.