zoom works only in chrome , scale ruins the graphic - html

Question

I have this structure and it works perfectly only in chrome!!:
.audio-controls {
display: none;
flex-direction: row;
gap: 1226px;
justify-content: center;
width: 100%;
position: absolute;
top: 82%;
left: 0%;
z-index: 99;
}
.prompt {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: not-allowed;
background: #000000;
border-radius: 35px;
}
.prompt .stim {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 124px;
width: 126px;
border-radius: 30%;
background: linear-gradient(#1f1f20, #040404);
transform: translateY(-6px);
overflow: hidden;
box-shadow: 0px 9px 3px #000000, 0 10px 20px rgb(0 0 0 / 25%);
}
.prompt .stim::before {
content: "";
opacity: 0.35;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
background-image: url(../img/hexellence.png);
}
.audio-controls .record {
transform: translate(0px, 40px);
zoom: 0.042;
}
.prompt .stim p {
transition: color 0.05s ease;
}
.stim p {
color: #b9b7b7;
font-family: "Open Sans Regular";
font-size: .7em;
margin-bottom: 4px;
transition: color 0.1s ease-in-out;
z-index: 1;
}
<div class="audio-controls" style="display: flex;">
<div id="start-recognition" class="prompt activated">
<div class="record-dot record-dot-position on" style="transform: translateY(-6px);"></div>
<div class="record-dot-container record-dot-position" style="transform: translateY(-6px);"></div>
<div class="stim">
<svg class="record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" enable-background="new 0 0 1000 1000" xml:space="preserve" style="fill: rgb(123, 55, 32);" width="1000" height="1000">
<rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"></rect>
<g class="currentLayer" style="">
<g id="svg_1" class="selected" fill="#dadada" fill-opacity="1">
<path d="M500,683.8c84.6,0,153.1-68.6,153.1-153.1V163.1C653.1,78.6,584.6,10,500,10c-84.6,0-153.1,68.6-153.1,153.1v367.5C346.9,615.2,415.4,683.8,500,683.8z M714.4,438.8v91.9C714.4,649,618.4,745,500,745c-118.4,0-214.4-96-214.4-214.4v-91.9h-61.3v91.9c0,141.9,107.2,258.7,245,273.9v124.2H346.9V990h306.3v-61.3H530.6V804.5c137.8-15.2,245-132.1,245-273.9v-91.9H714.4z" id="record-icon" fill="#dadada57" style="fill: rgba(218, 218, 218, 0.34);"></path>
</g>
</g>
</svg>
<p id="record-icon-text" style="color: rgb(185, 183, 183);">Hold Space Key</p>
</div>
</div>
</div>
The issue is in the above code I used zoom here:
.audio-controls .record {
transform: translate(0px, 40px);
zoom: 0.042;
}
And zoom is not working in Firefox so it only works in chrome.
In order to make this work I need to use scale instead right? I used scale in the below snippet but I ruined the graphic !
Have a look: ( I only removed zoom and replaces scale here)
.audio-controls {
display: none;
flex-direction: row;
gap: 1226px;
justify-content: center;
width: 100%;
position: absolute;
top: 82%;
left: 0%;
z-index: 99;
}
.prompt {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: not-allowed;
background: #000000;
border-radius: 35px;
}
.prompt .stim {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 124px;
width: 126px;
border-radius: 30%;
background: linear-gradient(#1f1f20, #040404);
transform: translateY(-6px);
overflow: hidden;
box-shadow: 0px 9px 3px #000000, 0 10px 20px rgb(0 0 0 / 25%);
}
.prompt .stim::before {
content: "";
opacity: 0.35;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
background-image: url(../img/hexellence.png);
}
.audio-controls .record {
transform: scale(0.042) translate(0px, 40px);
/*zoom: 0.042;*/
}
.prompt .stim p {
transition: color 0.05s ease;
}
.stim p {
color: #b9b7b7;
font-family: "Open Sans Regular";
font-size: .7em;
margin-bottom: 4px;
transition: color 0.1s ease-in-out;
z-index: 1;
}
<div class="audio-controls" style="display: flex;">
<div id="start-recognition" class="prompt activated">
<div class="record-dot record-dot-position on" style="transform: translateY(-6px);"></div>
<div class="record-dot-container record-dot-position" style="transform: translateY(-6px);"></div>
<div class="stim">
<svg class="record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" enable-background="new 0 0 1000 1000" xml:space="preserve" style="fill: rgb(123, 55, 32);" width="1000" height="1000">
<rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"></rect>
<g class="currentLayer" style="">
<g id="svg_1" class="selected" fill="#dadada" fill-opacity="1">
<path d="M500,683.8c84.6,0,153.1-68.6,153.1-153.1V163.1C653.1,78.6,584.6,10,500,10c-84.6,0-153.1,68.6-153.1,153.1v367.5C346.9,615.2,415.4,683.8,500,683.8z M714.4,438.8v91.9C714.4,649,618.4,745,500,745c-118.4,0-214.4-96-214.4-214.4v-91.9h-61.3v91.9c0,141.9,107.2,258.7,245,273.9v124.2H346.9V990h306.3v-61.3H530.6V804.5c137.8-15.2,245-132.1,245-273.9v-91.9H714.4z" id="record-icon" fill="#dadada57" style="fill: rgba(218, 218, 218, 0.34);"></path>
</g>
</g>
</svg>
<p id="record-icon-text" style="color: rgb(185, 183, 183);">Hold Space Key</p>
</div>
</div>
</div>
How can I fix using scale ?