I am currently developing an audio player for my application that includes a pause/play button, next button, and back button. I have encountered a problem specifically on Safari where the back/pause buttons are overlapping each other. The play/pause button changes based on the current play state. Interestingly, this issue only occurs on Safari while Chrome, Firefox, and IE work fine without any overlap. Can someone provide assistance with this? It seems like the styles associated with pause and play are conflicting with the styles of the back_container.
const [play, setPlay] = useState(false)
<div className = {styles.play_container}>
<div className={play ? styles.pause : styles.play} onClick={handlePlay}></div>
<div className = {styles.next_container} onClick={()=>handleNext()}>
<div className={styles.skip1}></div>
<div className={styles.skip2}></div>
</div>
<div className = {styles.back_container} onClick={()=>handleBack()}>
<div className={styles.back1}></div>
<div className={styles.back2}></div>
</div>
</div>
.play_container{
display: flex;
top: 40%;
position: absolute;
z-index: 2000;
height: 2%;
width: 68%;
/* left: 70px; */
justify-content: center;
}
.pause{
z-index: 2100;
height: 20px;
border-style: double;
border-width: 0px 0px 0px 19px;
border-color: #202020;
visibility: visible;
cursor: pointer;
}
.play{
z-index: 2100;
border-style: solid;
height: 20px;
border-width: 10px 0px 10px 15px;
border-color: transparent transparent transparent #202020;
box-sizing: border-box;
visibility: visible;
cursor: pointer;
}
.next_container{
display: flex;
position: absolute;
z-index: 2100;
width: 20px;
height: 20px;
cursor: pointer;
margin-left: 100px;
justify-content: center;
}
.back_container{
display: flex;
position: absolute;
z-index: 2100;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 100px;
justify-content: center;
}
.skip1{
z-index: 2100;
width: 20px;
height: 5px;
border-style: solid;
border-width: 7px 0px 7px 7px;
border-color: transparent transparent transparent #202020;
box-sizing: border-box;
visibility: visible;
margin-top: 3px;
}
.skip2{
z-index: 2100;
height: 14px;
border-left: 2.5px solid #202020;
visibility: visible;
margin-right: 10px;
margin-top: 3px;
}
.back1{
z-index: 2100;
height: 14px;
border-left: 2.5px solid #202020;
visibility: visible;
margin-left: 10px;
margin-top: 3px;
}
.back2{
z-index: 2100;
width: 20px;
height: 5px;
border-style: solid;
border-width: 7px 7px 7px 0px;
border-color: transparent #202020 transparent transparent;
box-sizing: border-box;
visibility: visible;
margin-top: 3px;
}