I basically have a component that slides up my page from the bottom and occupies 80% of the height. Inside this component I have a modal component. When I open this modal, it does not occupy the whole page as it should. I tracked down the reason for this being the transform: translateY() that I use to animate my component sliding. If I remove the transformation, the modal does fill the whole page.
I have made a simplified fiddle ilustrating the issue: https://jsfiddle.net/70yopxg6/2/
Note that setting the transformation with transform: translateY(0) animates the sliding but the modal does not open correctly. If we set the transformation as transform: none then it kinda works. But what if I have another transformations applied besides translateY? How would I do it without cleaning all transformations? I would like to also understand why this happens.
I'm using Chrome 70 by the way.
Thanks
