How to prevent content from hiding under the iOS Safari search bar? [duplicate]

I added a button on the bottom right corner of the screen, looks well on all browsers except IOS Safari, the search bar is over the button, It looks good on google mobile browser though. I came across a website where they managed to place the button over the search bar, but I can’t figure out how.

Here is my css:

@tailwind base;
@tailwind components;
@tailwind utilities;

#root {
  width: 100vw;
  height: 100vh;
}

body {
  margin: 0;
}

html, body {
  overscroll-behavior: none; /* Prevent the bounce effect on mobile */
  -webkit-text-size-adjust: none; /* Disable automatic text resizing */
  min-height: 100%; 
  -webkit-overflow-scrolling: none;
}

and this is the CSS Tailwind style for the button:

className="absolute bottom-6 right-6 w-14 h-14 
rounded-full bg-[#0c0c0d] flex items-center 
justify-center shadow-lg z-50 cursor-pointer 
text-white transition-transform hover:bg-[#535151] 
hover:scale-105"