I've created a container that covers the entire screen using the following CSS:
.container {
display: grid;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
The issue I'm facing is that changing the value of the "bottom" property doesn't impact the display as expected.
function toggle(){
var container = document.querySelector(".container");
container.classList.toggle("pull-down");
}.container {
display: grid;
grid-template-rows: 1fr 100px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.container.pull-down {
bottom: -100px;
}
div {
pointer-events: none;
}
button {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 40px;
width: 120px;
}<div class="container">
<div>first row</div>
<div>second row</div>
</div>
<button onclick="toggle()">toggle</button>Clicking the button should move the second row out of the screen. It works correctly on Firefox but not on Chrome version 78.0.3904.108.