Safari won't rotate an SVG path but chrome and firefox does? - svg

Question

I'm running into an extremely odd issue. I'm trying to animate an SVG path rotation based on an image hover. It seems to not add the class with the transform when you hover over the image. When I manually add it in the HTML it does work but I don't get why it won't work with just a hover function. I have added all the prefixes too. I made a codepen with an example SVG and image to hover. Please check this in safari and chrome.
Codepen link
HTML
<div class="wrapper-logo">
<svg class="App-logo" viewBox="0 0 375 84" fill="#DB3232" xmlns="http://www.w3.org/2000/svg">
<path class="LETTER-P" d="M39.3,6.1c9.59-.72,18.89,2.31,26.17,8.58,14.99,12.98,16.72,35.69,3.68,50.69-12.98,15.07-35.76,16.8-50.75,3.82-2.52-2.24-4.76-4.83-6.63-7.64v14.13c0,1.59-1.3,2.88-2.88,2.88s-2.88-1.3-2.88-2.88V41.94c0-8.58,3.1-16.94,8.72-23.43,6.27-7.28,14.99-11.68,24.58-12.4Z" />
</svg>
</div>
<svg class="App-pill" viewBox="0 0 375 84" fill="#DB3232" xmlns="http://www.w3.org/2000/svg"> <defs>
<mask id="mask-p">
<path class="LETTER-P" d="M39.3,6.1c9.59-.72,18.89,2.31,26.17,8.58,14.99,12.98,16.72,35.69,3.68,50.69-12.98,15.07-35.76,16.8-50.75,3.82-2.52-2.24-4.76-4.83-6.63-7.64v14.13c0,1.59-1.3,2.88-2.88,2.88s-2.88-1.3-2.88-2.88V41.94c0-8.58,3.1-16.94,8.72-23.43,6.27-7.28,14.99-11.68,24.58-12.4Z" fill="white"/>
<path class='pill-1' d="M47.3377 18.8021L18.8226 47.1101C13.7279 52.1678 13.7293 60.3942 18.8258 65.3743C23.9223 70.4298 32.2122 70.4281 37.2309 65.3704L65.746 37.0624C68.2554 34.5713 69.5477 31.2502 69.5471 27.9295C69.5465 24.6087 68.253 21.2882 65.7428 18.7982C60.7223 13.7426 52.4325 13.7444 47.3377 18.8021Z" fill="black"/>
</mask>
</defs>
</svg>
<footer>
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/" class="shoes small" alt="browns" onmouseover="rotateBrowns(this)" />
</footer>
CSS
.App-pill {
display: block;
width: 0;
height: 0;
}
.App-logo {
min-width: 50%;
pointer-events: none;
}
/* LETTER */
.LETTER-P {
-webkit-mask: url(#mask-p);
mask: url(#mask-p);
}
.pill-1 {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform-origin: 42px 41px;
-ms-transform-origin: 42px 41px;
transform-origin: 42px 41px;
}
.horizontal {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
JS
let shoesarray = document.querySelectorAll('.shoes')
let path1 = document.querySelector('.pill-1')
let path2 = document.querySelector('.pill-1')
let path3 = document.querySelector('.pill-1')
let path4 = document.querySelector('.pill-1')
function rotateBrowns() {
console.log('e')
path1.classList.add('horizontal')
path2.classList.add('horizontal')
path3.classList.add('horizontal')
path4.classList.add('horizontal')
}
function revertBrowns() {
console.log('e')
path1.classList.remove('horizontal')
path2.classList.remove('horizontal')
path3.classList.remove('horizontal')
path4.classList.remove('horizontal')
}