CSS Item Overlap on Safari

Question

I'm creating an audio player for my app which has a pause/play button, next button, and back button. I'm running into an issue only on safari where the back/pause button overlap with each other. The play/pause button is dependent on the current state of play. On Chrome, firefox, and IE there is no overlap. I'm only running into the issue on safari can anyone help? Styles.pause/styles.play overlaps with styles.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;

}

Answer 1

It's a strange one but I have found if I specify a left value for the back_container and use a transform I am able to position as expected:

.back_container{
display: flex;
position: absolute;
z-index: 2100;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 100px;
justify-content: center;
left: 50%;
transform: translateX(-100px);
}

The left value centers the back button (on top of the play button) and the transform moves it back the desired 100px. I personally would have made a container that was a the desired width for the controls and aligned them with flexbox or grid (perhaps flex with justified space between) and then centered the play container but the above code should be a quick fix.

Answer 2

You Should Know That Not Every Style Applied To An HTML Element Will Work In Every Browser.

This is a general knowledge If you are experiencing problems with styling in safari.

You can write a style which will work on only safari browsers and not affect the other browswers while fixing the bug.

to write styles specific to safari wrap the styles in

@media screen and (-webkit-min-device-pixel-ratio:0) {
  //apply the solution styling to safari here
}