One issue in Firefox is its inability to properly handle the clipping of rounded corner elements, especially when multiple backgrounds are involved. This problem can sometimes be resolved by setting background-clip: content-box within a class for non-absolute elements. However, there are cases where this solution does not work, regardless of other properties applied. On the other hand, Chrome does not experience these problems and handles clipping more effectively. I have provided examples below based on different scenarios that I have recreated using code snippets and screenshots from various browsers.
https://i.sstatic.net/6kGtl.jpg
I kindly request not to suggest removing multiple backgrounds and blend modes as they are necessary due to CSS limitations with 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>