This navbar in react has a button that opens a dropdown, for some reason this button works on all devices I tested, except iOS.

    import { FaBars } from 'react-icons/fa6'
    import logo from '../assets/logo.svg'
    import { useState } from 'react'
    
    export function Nav() {
      const [isNavOpen, setIsNavOpen] = useState(false)
    
      function toggleNavbar() {
        setIsNavOpen(!isNavOpen)
      }

  return (
    <header className="p-4 flex justify-between items-center max-w-screen-xl mx-auto relative">
      {/* Logo */}
      <div className="flex items-center gap-2">
        <img src={logo} alt="logo" className="h-8" />
        <span className="text-2xl font-semibold">padovan.io</span>
      </div>

      {/* Ícone do menu (visível apenas no mobile) */}
      <button
        className="lg:hidden cursor-pointer"
        type="button"
        onClick={toggleNavbar}
      >
        <FaBars size={24} />
      </button>

      {/* Menu de navegação (para telas grandes) */}
      <nav className="hidden lg:flex gap-4">
        <a href="." className="">
          Home
        </a>
        <a href="#projects" className="">
          Projetos
        </a>
        <a href="#services" className="">
          Serviços
        </a>
        <a href="#about" className="">
          Sobre
        </a>
        <a href="#form" className="">
          Contato
        </a>
      </nav>

      {/* Menu dropdown para mobile (aparece ao clicar no ícone) */}
      {isNavOpen && (
        <div className="absolute md:hidden top-full left-1/2 transform -translate-x-1/2 mt-2 w-[95%] bg-gray-800 text-white shadow-lg rounded-md z-20">
          {/* Links de navegação */}
          <a href="." className="block px-4 py-2 hover:bg-gray-600">
            Home
          </a>
          <a href="#projects" className="block px-4 py-2 hover:bg-gray-600">
            Projetos
          </a>
          <a href="#services" className="block px-4 py-2 hover:bg-gray-600">
            Serviços
          </a>
          <a href="#about" className="block px-4 py-2 hover:bg-gray-600">
            Sobre
          </a>
          <a href="#form" className="block px-4 py-2 hover:bg-gray-600">
            Contato
          </a>
        </div>
      )}
    </header>
  )
}`

I’ve tried everything, z-index etc, but nothing works
Does anyone know how to make the hamburger menu work on iOS?
It worked on everything I tested, Chrome on the PC notebook and Android, Edge on the PC, but on the iPhone and Mac this dropdown doesn’t work