CSS footerbar no celular com footerbar padrão do navegador ocupando espaço

[giovane2002]

Fiz uma footerbar para quando o usuario rolar a tela para cima ela apareça, até ai tudo bem, no celular também funciona, mas alguns navegadores de celular vem aparece algumas opções também, quero saber se tem algum jeito com css ou js de verificar se o navegador possui essa footerbar como padrão ou se quando ela aparecer a minha footer bar ficar em cima da do navegador. Primeira imagem é o exemplo de um navegador com a propria footerbar e a segunda é de como deveria ficar;

 

 

 

 

<div class="container fixed-bottom" id="footbar">
        <div class="container" id='footerconfig'>

            <div class="float-right d-flex">
                <div>
                    <div class="onoffswitch" style="bottom: -4px">
                        <input type="checkbox" onclick="darkmode.toggle();" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
                        <label class="onoffswitch-label dark-toggle" for="myonoffswitch">
                            <span class="onoffswitch-inner"></span>
                            <span class="onoffswitch-switch"></span>
                        </label>
                    </div>
                </div>
                <div class="ml-2">
                    <label style="cursor: pointer; color: white;" for="myonoffswitch">
                        Dark Mode
                    </label>
                </div>

            </div>
        </div>

#footbar {
    transition: 0.5s;
}

#footerconfig {
    padding-bottom: 33px;
    padding-top: 10px;
    background-color: #343a40!important;
}
//tentativa de arrumar o problema 
@media only screen and (max-device-width: 768px) {
    #footerconfig {
        padding-bottom: 33px;
        padding-top: 10px;
        background-color: #343a40!important;
    }
}

ps: estou usando bootstrap, jquery e darkmode.js