CSS content-visibility: auto; странное поведение

/* без этого правила всё работает правильно */
* {
  content-visibility: auto;
  contain-intrinsic-size: 1px 5000px;
} 
/**/

.header_wrapper {
    width: 100%;
    display: flex;
    align-items: center;
}


element.style {
}
@media (min-width: 991px)
.btn_menu__checkbox {
    display: none;
}
.btn_menu__checkbox {
    position: absolute;
    top: 10px;
    right: 5px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: block;
    opacity: 0;
}
.block_navigation {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 450px;
    max-width: 100vw;
    height: 100vh;
    transform: translateX(100%);
    flex-direction: column;
    justify-content: center;
    background: #fff;
    z-index: 20;
}

.bl_nav {
    position: relative;
    padding-top: 128px;
    width: 100%;
}

.btn_menu {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #1292f0;
    background: 0 0;
    z-index: 21;
    cursor:pointer;
}

.btn_menu__checkbox:checked+.block_navigation {
    transform: translateX(0);
}

<div class="header_wrapper container">
  <input class="btn_menu__checkbox" id="topmenu" type="checkbox">
  <div class="block_navigation">
    <nav class="bl_nav">
      <ul class="bl_nav__list">
        <li class="bl_nav__item"><a href="/" aria-current="page" class="bl_nav__link active">Home Page1</a></li>
        <li class="bl_nav__item"><a href="/" aria-current="page" class="bl_nav__link active">Home Page2</a></li>
        <li class="bl_nav__item"><a href="/" aria-current="page" class="bl_nav__link active">Home Page3</a></li>
        <li class="bl_nav__item"><a href="/" aria-current="page" class="bl_nav__link active">Home Page4</a></li>
      </ul>
      <label class="btn_nav__mobil" for="mob-2009"></label>
    </nav>
  </div>
  <label class="btn_menu" for="topmenu"></label>
</div>