How to fix height difference between Chrome and Safari? - css

Question

I saw differences on my height's div between multiple browsers.
On Google chrome it works perfectly but on Safari, there is a difference as you can see on screenshots :
div-screen-chrome
div-screen-safari
Here is my code :
.player {
bottom: 0;
position: fixed;
width: 100%;
height: 55px;
background-color: grey;
color: white;
font-family: 'Oswald';
line-height: 50px;
}
.next-container {
position: relative;
float: right;
padding-right: 10px;
padding-left: 10px;
font-size: 15px;
height: 55px;
top: -53px;
max-width: 50%;
min-width: 20%;
background-color: #ffc107;
color: white;
line-height: 55px;
text-align: center;
}
<div class="player">
<div class="artist-title-infos">
<span class="cover"><img class="picture" src="http://my-cover" alt="cover"></span>
<div class="infos">
<button class="buttonPlayer notPlaying"><i id="iconPlayer" class="fas fa-play-circle"></i></button>
<button class="pausePlayer notPaused"><i id="iconPlayer" class="fas fa-pause-circle"></i></button>
<span class="artist">Now : </span>
<span class="title">Your song</span>
</div>
</div>
<div class="next-container">
<span class="next">Next : </span>
<span class="next next-songs-0">Your song 1</span>
<span class="next next-songs-1">, Your song 2</span>
<span class="next next-songs-2"> & Your song 3</span>
</div>
</div>
How to fix it ?
Thanks