CSS transform start position differs in Chrome and Safari - css

Question

I'm working on a website for cookies. I created a keyframe to rotate the cookies and adjust the postioning. On google chrome, everything looks as expected, but in Safari the #main-cookie starts in the wrong position (somewhere in the middle of the screen), but ends in the correct position - it snaps into place at the end of the rotating. I am not sure if I am missing something but am open to suggestions to fix this issue.
Here is the CSS for the key frames in variables:
#keyframes rotate-cookie-desktop {
from {
transform-origin: 50% 50%;
-webkit-transform: translate(-50%, -5%) rotate(0deg); /* Chrome, Safari, Opera */
-moz-transform: translate(-50%, -5%) rotate(0deg);
-ms-transform: translate(-50%, -5%) rotate(0deg);
-o-transform: translate(-50%, -5%) rotate(0deg);
transform: translate(-50%, -5%) rotate(0deg); /* Standard syntax */
overflow: hidden;
}
to {
transform-origin: 50% 50%;
-webkit-transform: translate(-50%, -5%) rotate(360deg); /* Chrome, Safari, Opera */
-moz-transform: translate(-50%, -5%) rotate(360deg);
-ms-transform: translate(-50%, -5%) rotate(360deg);
-o-transform: translate(-50%, -5%) rotate(360deg);
transform: translate(-50%, -5%) rotate(360deg); /* Standard syntax */
overflow: hidden;
}
}
#media only screen and (max-width: 480px) {
html {
width: 100%;
}
#keyframes rotate-cookie-mobile {
from {
transform-origin: 50% 50%;
-webkit-transform: translate(-82%,-12%) rotate(0deg); /* Chrome, Safari, Opera */
-moz-transform: translate(-82%,-12%) rotate(0deg);
-ms-transform: translate(-82%,-12%) rotate(0deg);
-o-transform: translate(-82%,-12%) rotate(0deg);
transform: translate(-82%,-12%) rotate(0deg); /* Standard syntax */
overflow: hidden;
}
to {
transform-origin: 50% 50%;
-webkit-transform: translate(-82%,-12%) rotate(360deg); /* Chrome, Safari, Opera */
-moz-transform: translate(-82%,-12%) rotate(360deg);
-ms-transform: translate(-82%,-12%) rotate(360deg);
-o-transform: translate(-82%,-12%) rotate(360deg);
transform: translate(-82%,-12%) rotate(360deg); /* Standard syntax */
overflow: hidden;
}
}
}
Here is the relevant CSS calling the keyframe on #main-cookie:
.overlay {
background-color: var(--clr-modal-backdrop);
z-index: var(--zindex-modal-backdrop);
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
.offClick {
position: fixed;
width: 100%;
height: 100%;
}
.modalContainer {
display: block;
top: 5%;
left: 5%;
position: fixed;
width: 90%;
height: 90%;
background-color: var(--clr-off-white);
z-index: var(--zindex-modal);
overflow: hidden;
border-radius: 12px;
& #main-cookie {
display: flex;
z-index: var(--zindex-popover);
overflow: hidden;
position: absolute;
height: 100vh;
transform: translate(-50%,-5%);
-webkit-transform: translate(-50%,-5%);
animation: rotate-cookie-desktop 15s;
animation-fill-mode: forwards;
}
}
#media only screen and (max-width: 480px) {
.modalContainer {
height: 90%;
& #main-cookie {
display: block;
z-index: var(--zindex-popover);
overflow: hidden;
position: absolute;
height: 100vh;
transform: translate(-82%,-12%);
-webkit-transform: translate(-82%,-12%);
animation: rotate-cookie-mobile 15s;
}
}
}
Any help is appreciated!
I have tried resetting the top and right for the browser. That showed inconsistent results. I also tried switching the order of rotate and translate in the keyframe - that showed no difference.