Hey there! I created a small hamburger button for my website, but for some reason, it doesn't show up on Safari iOS. Interestingly, it works perfectly fine on Windows Chrome, Windows Firefox, and my Android device. I've been trying to troubleshoot this as a newbie in web development, but I haven't been able to figure it out. Do you have any idea what might be causing this issue?
Here's the code for the React component:
import React from "react";
import "./DrawerButton.css";
const drawerButton = (props: Props) => (
<button onClick={props.onClick} className="drawer_button">
<div className="drawer_button_line" />
<div className="drawer_button_line" />
<div className="drawer_button_line" />
</button>
);
interface Props {
onClick: () => void;
}
export default drawerButton;
And here's the CSS code:
.drawer_button {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 24px;
width: 23px;
background: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
box-sizing: border-box;
}
.drawer_button_line {
width: 100%;
height: 2px;
background: white;
border-radius: 3px;
}