Border-radius not working during CSS transform - css

Question

Trying to make a rounded menu background. But the border-radius is not working while closing
var menuButton = document.querySelector('.btn-menu');
menuButton.addEventListener('click', function(e){
e.preventDefault();
document.body.classList.toggle('menu-open');
});
.btn-menu{
width: 30px;
height: 30px;
border: 2px solid red;
position: relative;
z-index: 5;
float: right;
}
.menu-bg {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 40;
pointer-events: none;
z-index: 1;
}
.menu-bg:before {
content: '';
height: 1px;
width: 1px;
background: #000;
position: fixed;
right: 30px;
top: 30px;
transition: all ease .8s;
border-radius: 50%;
transform: scale(1);
overflow:hidden;
}
.menu-open .menu-bg:before {
transform: scale(500);
}
<div class="btn-menu"><span>Menu</span></div>
<div class="menu-bg"></div>
JSFiddle - https://jsfiddle.net/afelixj/ew7b065h/

Answer 1

1px as width/height is not a good idea, I would do it differently and start at scale(0):
var menuButton = document.querySelector('.btn-menu');
menuButton.addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.toggle('menu-open');
});
.btn-menu {
width: 30px;
height: 30px;
border: 2px solid red;
position: relative;
z-index: 5;
float: right;
}
.menu-bg {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 40;
pointer-events: none;
z-index: 1;
}
.menu-bg:before {
content: '';
height: 100px;
width: 100px;
background: #000;
position: fixed;
right: -20px;
top: -20px;
transition: all ease .8s;
border-radius: 50%;
transform: scale(0);
overflow: hidden;
}
.menu-open .menu-bg:before {
transform: scale(5);
}
<div class="btn-menu"><span>Menu</span></div>
<div class="menu-bg"></div>

Answer 2

It's a browser bug. Sometimes it works fine and then, if you change window width, it will start messing up (I saw the problem sometimes opening the menu up).
There's a known problem using transform on fixed elements: link You should try to avoid it.
In your case, insteed of transform you could just change your width, height and position to make it work as you may desire.
As an example:
var menuButton = document.querySelector('.btn-menu');
menuButton.addEventListener('click', function(e){
e.preventDefault();
document.body.classList.toggle('menu-open');
});
.btn-menu{
width: 30px;
height: 30px;
border: 2px solid red;
position: relative;
z-index: 5;
float: right;
}
.menu-bg {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 40;
pointer-events: none;
z-index: 1;
}
.menu-bg:before {
content: '';
height: 1px;
width: 1px;
background: #000;
position: fixed;
right: 30px;
top: 30px;
transition: all ease .3s;
transform: scale(1);
border-radius: 50%;
}
.menu-open .menu-bg:before {
transition: all ease .6s;
height: 400px;
width: 400px;
right: -90px;
top: -90px;
border-radius: 50%;
}
<div class="btn-menu"><span></span></div>
<div class="menu-bg"></div>