Border-radius not working during CSS transform

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"><a href=""><span>Menu</span></a></div>
<div class="menu-bg"></div>

JSFiddle - https://jsfiddle.net/afelixj/ew7b065h/

score 1 · Answer 1 · answered Aug 11 '20 at 18:17

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"><a href=""><span></span></a></div>
<div class="menu-bg"></div>

score 1 · Accepted Answer · answered Aug 11 '20 at 19:29

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"><a href=""><span>Menu</span></a></div>
<div class="menu-bg"></div>

Border-radius not working during CSS transform

2 Answers2