Image fills up the whole space on Safari mobile - css

Question

So my site's navbar shows up differently on Android and iOS phone, on Chrome/Android it looks fine but for some reason, the hamburger icon got stretched out and covers the whole page on Safari/iOS.
I use TailwindCSS and here's my code:
<nav className="fixed sticky top-0 z-10 flex gap-2 p-2 bg-white cursor-pointer md:pl-4">
<img
onClick={toggleOpen}
src="/hamburger-menu-red.png" className="w-10" alt="menu"
/>
{props.showLogo && (
<Link to="/">
<img
src="/cooken-logo.png" alt="cooken-logo" className="w-20 cursor-pointer" />
</Link>
)}
</nav>
Is it because I don't specify the height of the hamburger icon or is it some compatibility issue with Safari? Any help would be greatly appreciated.
Update based on Seth's input
<nav className="fixed sticky top-0 z-10 flex items-center h-12 gap-2 p-2 bg-white md:pl-4">
<button
onClick={toggleOpen}
>
<img
src="/hamburger-menu-red.png" className="w-10 h-8" alt="menu"
/>
</button>
{props.showLogo && (
<Link to="/">
<img
src="/cooken-logo.png" alt="cooken-logo" className="w-16 h-8"
/>
</Link>
)}
</nav>

Answer 1

Because it is the child of a flex item and the default align-items property of flex items is stretch.
However, there are other issues that are more of concern with your code, it is invalid. Neither an image of a hamburger or a site logo are justifiable nav items. A nav element should contain navigation links to site pages.
You should not attach a click event to an image. An image element is just for showing an image, nothing else. If it goes somewhere use a link, if it does something use a button element.
You don't need to put cursors on links, they already have them; images don't because they are not interactive elements.
I would suggest that the best approach is to use a button elemement (which already comes with clicky behaviours built in) to reveal a list of links (which come with linky behaviours built in).