css-transitions css-transforms android-chrome

Android Google Chrome menu-burger transition issue(translateY doesn't work properly)

const menu = document.querySelector(".mini-menu");

menu.addEventListener("click", () => menu.classList.toggle("opened"));

html, body
{
  width: 100%;
  height: 100%;
  margin: 0;
}

.container
{
  display: flex;  
  width: 100%;
  height: 100%;
  background: #47b6e04a;
  justify-content: center;
  align-items: center;
}

.mini-menu
{        
  cursor: pointer;
  transition: all .4s linear;
}

.line
{
  transition: all .4s linear;
  transform-origin: center;
}   

.mini-menu.opened
{
  transform: rotate(45deg);
}

.mini-menu.opened .line_top
{
  transform: translateY(24px); 
}

.mini-menu.opened .line_mid
{            
  transform: rotate(-90deg);
}

.mini-menu.opened .line_bottom
{
  transform: translateY(-24px);
}

<div class="container">  
    <svg xmlns="http://www.w3.org/2000/svg" width=80 height=80 stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="mini-menu">   
      <line x1="6" y1="16" x2="74" y2="16" class="line line_top"></line>
      <line x1="6" y1="40" x2="74" y2="40" class="line line_mid"></line> 
      <line x1="6" y1="64" x2="74" y2="64" class="line line_bottom"></line>
   </svg>   
</div>

Click on menu-burger - transition becomes. It works correctly in desktop Google Chrome, but in Chrome on Android transition of top and bottom lines for translateY isn't shown, at the end it just "jumps" to final state. Does anyone know what's here the problem, and is there a way to fix it? Big thanks!

Solution

So, it seems the problem was in translating SVG. Just changed code, and it works smoothly now.

const menu = document.querySelector(".mini-menu");

menu.addEventListener("click", () => menu.classList.toggle("opened"));

html, body
{
  width: 100%;
  height: 100%;
  margin: 0;
}

.container
{
  display: flex;  
  width: 100%;
  height: 100%;
  background: #47b6e04a;
  justify-content: center;
  align-items: center;
}

.mini-menu
{ 
  display: flex;  
  flex-direction: column;  
  width: 70px;
  height: 92px;
  cursor: pointer;
  transition: all .4s linear;
}

.line
{
  margin-bottom: 20px;
  width: 100%;
  height: 4px;
  background: #000;
  transition: all .4s linear;
  
}   

.line_top
{
  margin-top: 20px;
}

.line_bottom
{
  margin-bottom: 0;
}

.mini-menu.opened
{
  transform: rotate(45deg);
}

.mini-menu.opened .line_top
{
  transform: translateY(24px); 
}

.mini-menu.opened .line_mid
{            
  transform: rotate(-90deg);
}

.mini-menu.opened .line_bottom
{
  transform: translateY(-24px);
}

<div class="container">  
    <div class="mini-menu">
      <div class="line line_top"></div>
      <div class="line line_mid"></div>
      <div class="line line_bottom"></div>
    </div>
</div>