Busco crear menu lateral desplegable usando el checkbox El menu desplegable funciona correctamente con firexfox pero no en chrome
/*NORMALICE*/
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
box-sizing: border-box;
}
:root{
--gray_1: hsla(246, 0%, 24%, 1);
--gray_2: hsla(246, 0%, 32%, 1);
--gray_3: hsla(246, 0%, 40%, 1);
--gray_4: hsla(246, 0%, 50%, 1);
--gray_5: hsla(246, 0%, 65%, 1);
--text-color: white;
--size_h0: 20px;
--size_h1: 18px;
--size_h2: 16px;
--size_h3: 14px;
--size_h4: 12px;
--size_h5: 10px;
}
body{
/*background: whitesmoke;*/
background: hsla(0,0%,15%,1);
}
h1,h2,h3,h4,h5,h6,p{
font-family: sans-serif;
}
h1,h2,h3,h4,h5,h6,p,picture{
margin: 0;
}
picture{
/*padding: 0;*/
}
main{
width: 100%;
}
body,h1
{
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: whitesmoke;
}
p{
font-size: 20px;
}
.fxc{
display: flex;
justify-content: center;
align-items: center;
}
.fxcc{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/*---------------------------------------*/
@media screen and (max-width: 320px) {
body{
/*background: red;*/
}
#main{
display: grid;
grid-template-columns: repeat(12,1fr);
grid-template-rows: 60px auto auto auto;
grid-gap: 13px;
}
#header{
grid-column: 1 / 13;
display: flex;
justify-content: center;
background: var(--gray_1);
position: relative;
}
#section{
grid-column: 1 / 13;
color: white;
background: var(--gray_2);
padding: 14px 0px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#footer{
grid-column: 1 / 13;
color: white;
display: flex;
justify-content: center;
align-items: center;
background: var(--gray_3);
}
.icons_header_1{
/*Flex Center Activo # > picture*/
position: absolute;
right: 0;
padding: 0px 5px;
transition: all 0.2s;
-webkit-transition: all 0.2s;/*No Chrome*/
cursor: pointer;
}
.icons_header_1 picture img{
max-height: 60px;
height: 100%;
}
.icons_header_1:hover{
background: var(--gray_5);
}
/*-----------------FUNCIONA EN FIREXFOX Y NO EN CHROME-------------------------*/
#header section{
background: var(--gray_3);
width: 100%;
position: fixed;
bottom: 0;
top: 0;
height: 100vh;
left: 0px;
transition: all .35s;
}
#header input[type="checkbox"]:checked ~ #menu-caja{
left: 500px;
}
/*------------------------------------------*/
#header #menu-caja label {
top: 0;
right: 0;
overflow: hidden;
position: absolute;
transition: all .2s;
cursor: pointer;
}
#header #menu-caja article:nth-child(1):hover{
background: var(--gray_4);
}
#header #menu-caja article picture{
max-width: 70px;
max-height: 70px;
}
#header #menu-caja article picture img{
width: 80px;
height: 80px;
padding: 0px 20px;
transform: rotate(90deg);
}
#header #menu-caja article{
width: 100%;
}
#nav{
width: 100%;
}
#nav ul li a{
width: 100%;
cursor: pointer;
transition: all .2s;
padding: 15px 0px;
font-family: sans-serif;
}
#nav ul li a:hover{
background: var(--gray_1);
}
}
<main id="main">
<header id="header" class="fxc">
<div id="title">
<h1>TITULO</h1>
</div>
<!-- BOTON -->
<input id="menu-btn_duo" type="checkbox" style="">
<div class="icons_header_1">
<label for="menu-btn_duo">
<picture class="fxc">
<img src="<?php echo ICONS_IMG ?>menu-btn.png" alt="menu-btn">
</picture>
</label>
</div>
<!-- MENU DESPLEGABLE -->
<section id="menu-caja" class="fxcc">
<label for="menu-btn_duo">
<article>
<picture class="fxc">
<img src="<?php echo ICONS_IMG ?>menu-btn-2.svg" alt="menu_salir">
</picture>
</article>
</label>
<article>
<nav id="nav">
<ul>
<li class="fxcc">
<a class="fxc" href="">INICIO</a>
<a class="fxc" href="">NOTICIAS</a>
<a class="fxc" href="">LOGIN</a>
<a class="fxc" href="">REGISTRO</a>
</li>
</ul>
</nav>
</article>
</section>
</header>
</main>