Issue with Safari Position absolute on an image - html

Question

I have an image as a background with an SVG play button overlaying it. It works fine in Chrome Firefox but when I look at it in Safari it does not work as it is expected to work like in Chrome
Does not work in Safari
.Testiomonials-Play{
position: absolute;
left: 170px;
top:50px;
background-color: Transparent;
width: 120px;
border:none;
height: 50px;
font-size: 10px;
}
<img class = "dexia"
src="https://www.blueface.com/wp-content/uploads/2018/03/dexia-320x220-
final.png" width = "320" height="220" />
<button class = "btn btn-primary Testiomonials-Play" > <svg width =
"50px" height = "120px" version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 452 472" style="enable-background:new 0 0 452 472;"
xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#00B6F1;}
</style>
<path class="st0" d="M223.7,456.8c115.6,0.9,214.4-92,215.6-212.3c1.2-122.8-94.7-213.1-204.9-217.9
C105.9,21.1,10.3,122.1,8.6,238.1C6.9,361.4,106.6,457.4,223.7,456.8z"/>
<path class="st1" d="M223.7,456.8C106.6,457.4,6.9,361.4,8.6,238.1c1.6-115.9,97.3-217,225.8-211.4
c110.2,4.7,206.1,95.1,204.9,217.9C438.1,364.7,339.3,457.7,223.7,456.8z M169,245.3c0,25.3-0.1,50.6,0,76
c0.1,12,7.7,16.4,17.8,10.5c43.4-25.4,86.8-50.8,130.1-76.3c9.8-5.8,9.6-14.7-0.2-20.5c-10.9-6.4-21.8-12.8-32.7-19.2
c-32.3-18.9-64.6-37.9-96.9-56.8c-9.9-5.8-17.5-1.6-18,9.8c-0.1,1.7,0,3.3,0,5C169,197.7,169,221.5,169,245.3z"/>
</svg>
</button>

Answer 1

Hope this helps you out. First of all remove inline styles from svg, and here i think you are missing a parent relative container in the above posted markup. Please check the updated snippet. Checked on browsers too.
.Testiomonials-Play{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background-color: Transparent;
width: auto;
border:none;
height: auto;
}
svg {
width: 50px;
}
div {
position: relative;
display: inline-block;
}
<div>
<img class = "dexia"
src="https://www.blueface.com/wp-content/uploads/2018/03/dexia-320x220-
final.png" width = "320" height="220" />
<button class = "btn btn-primary Testiomonials-Play" > <svg version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 452 472" style="enable-background:new 0 0 452 472;"
xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#00B6F1;}
</style>
<path class="st0" d="M223.7,456.8c115.6,0.9,214.4-92,215.6-212.3c1.2-122.8-94.7-213.1-204.9-217.9
C105.9,21.1,10.3,122.1,8.6,238.1C6.9,361.4,106.6,457.4,223.7,456.8z"/>
<path class="st1" d="M223.7,456.8C106.6,457.4,6.9,361.4,8.6,238.1c1.6-115.9,97.3-217,225.8-211.4
c110.2,4.7,206.1,95.1,204.9,217.9C438.1,364.7,339.3,457.7,223.7,456.8z M169,245.3c0,25.3-0.1,50.6,0,76
c0.1,12,7.7,16.4,17.8,10.5c43.4-25.4,86.8-50.8,130.1-76.3c9.8-5.8,9.6-14.7-0.2-20.5c-10.9-6.4-21.8-12.8-32.7-19.2
c-32.3-18.9-64.6-37.9-96.9-56.8c-9.9-5.8-17.5-1.6-18,9.8c-0.1,1.7,0,3.3,0,5C169,197.7,169,221.5,169,245.3z"/>
</svg>
</button>
</div>