Firefox border-radius white edges - html

Question

There is annoying thing in Firefox that it can't handle clipping (antialiasing?) of rounded corner elements, especially if there are multiple backgrounds. In some scenarios (non-absolute elements I guess) it can be solved by setting background-clip: content-box inside a class but in other cases it can't be solver that way even with any other properties. Although, Chrome does not creating this problems (or have better working with clipping under the hood). Here some examples based on my scenarios that I managed to recreate with snippets and screenshot of results in different browsers.
Please don't offer me to get rid of multiple backgrounds and blend modes because I need it due to css doesn't support gradient transitions.
body {
margin: 0;
}
.wrapper {
position: relative;
padding: 20px;
background-color: #2B3351;
}
.child {
display: inline-block;
position: relative;
padding: 24px 48px;
text-align: center;
font-family: "Raleway", sans-serif;
font-weight: 900;
font-size: 18px;
text-transform: uppercase;
align-items: center;
color: rgba(255, 255, 255, 0.6);
border-radius: 34px;
background-color: #181B34;
background-image: linear-gradient(160deg, #e6e7f9 11.77%, #ebebfb 74.75%);
background-blend-mode: multiply;
box-shadow: -10px -10px 15px rgba(165, 206, 255, 0.1), 10px 10px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 rgba(165, 206, 255,0), inset 0 0 0 rgba(0,0,0,0);
margin: 24px 0;
background-clip: content-box;
}
.absolute {
position: absolute;
background-color: #030b33bf;
background-image: linear-gradient(160deg, #e7ecfd, #FfffFF);
background-blend-mode: multiply;
width: 24px;
height: 24px;
border-radius: 50%;
transform: translate(150px, -60px);
box-shadow: -3px -3px 5px rgba(0, 6, 39, 0), 4px 4px 8px rgba(0, 6, 39, .35);
background-clip: border-box;
}
<div class="wrapper">
<div class ="child"></div>
<div class="absolute"></div>
</div>