The reason is indeed simply because the div is initially hidden, all you need to do is to hide it some other way, I didn't really have much success with visibility: hidden;
or opacity: 0;
, top: -alot;
along with parent being overflow: hidden;
did the job.
This piece of code from Harry Roberts could probably do the job as well.
/**
* Hide content off-screen without resorting to `display:none;`, also provide
* breakpoint specific hidden elements.
*/
@mixin accessibility{
border:0!important;
clip:rect(0 0 0 0)!important;
height:1px!important;
margin:-1px!important;
overflow:hidden!important;
padding:0!important;
position: absolute!important;
width:1px!important;
}