ウィンドウのサイズを変更するとチェックボックスがオフになる

私はCSS3チェックボックスを使用して、モバイルデバイスとタブレットデバイスのサイドバーの表示/非表示を制御しています。これはすべて意図どおりにうまく動作します。ただし、ウィンドウ/ブラウザのサイズが変更された場合（モバイルの場合でも）、サイドバーがすぐにチェックされなくなり、ナビゲーションバーが表示されなくなります。ウィンドウのサイズを変更するとチェックボックスがオフになる

JSFiddleでコードを分離しようとしましたが、エラーは発生しません。コードスニペットとウェブサイト自体を含めます。どちらも同じクラス名とID名を使用しています。

ul, li { 
 
    list-style-type:none; 
 
} 
 

 
.header__actions__menu { 
 
    display: inline-block; 
 
    font-size: .5625rem; 
 
    font-weight: bold; 
 
} 
 

 
.header__actions__menu span:before { 
 
    content: "X"; 
 
    font-family: 'FontAwesome'; 
 
    font-weight: normal; 
 
    position: absolute; 
 
    text-rendering: optimizeLegibility; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-smoothing: antialiased; 
 
    font-style: normal; 
 
    font-size: .875rem; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.header__actions__menu span { 
 
    background-color: #fff; 
 
    border: 2px solid #000; 
 
    display: block; 
 
    margin: 0 auto 3px; 
 
    position: relative; 
 
    height: 20px; 
 
    width: 22px; 
 
} 
 

 
.header__actions__close { 
 
    opacity: 0; 
 
    position: absolute; 
 
    transition: opacity .1s linear 1s; 
 
    visibility: hidden; 
 
} 
 

 
.header__actions__close { 
 
    background-color: #000; 
 
    border-radius: 100%; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    position: relative; 
 
    height: 22px; 
 
    width: 22px; 
 
    text-indent: -9999px; 
 
} 
 

 
.header__actions__close:before, .header__actions__close:after { 
 
    opacity: 0; 
 
    transition: opacity .1s linear .2s; 
 
    visibility: hidden; 
 
} 
 

 
.header__actions__close:before, .header__actions__close:after { 
 
    background-color: #fff; 
 
    content: ''; 
 
    left: 50%; 
 
    position: absolute; 
 
    height: 2px; 
 
    width: 14px; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%) rotate(45deg); 
 
} 
 

 
.header__actions__close:after { 
 
    transform: translate(-50%, -50%) rotate(-45deg); 
 
} 
 

 
/*-- Checked CSS --*/ 
 
#mobile-nav:checked ~ .header__actions .header__actions__menu, #mobile-nav:checked ~ .header__actions .header__actions__phone { 
 
    display: none; 
 
} 
 

 
#mobile-nav:checked ~ .header__actions .header__actions__close { 
 
    display: inline-block; 
 
    opacity: 1; 
 
    position: relative; 
 
    visibility: visible; 
 
} 
 

 
#mobile-nav:checked ~ .header__actions .header__actions__close:before, #mobile-nav:checked ~ .header__actions .header__actions__close:after { 
 
    opacity: 1; 
 
    position: absolute; 
 
    visibility: visible; 
 
} 
 

 
/*-- Breakpoints --*/ 
 
@media only screen and (max-width: 991px) { 
 
.header__actions li:last-child { 
 
    margin-left: auto; 
 
}

<input type="checkbox" style="display: block;" id="mobile-nav"> 
 

 
<div class="header__actions" data-section="header-account-actions"> 
 
    <ul> 
 
    <li> 
 
     <label for="mobile-nav" class="header__actions__menu"> 
 
     <span></span> 
 
     Menu 
 
     </label> 
 

 
     <label for="mobile-nav" class="header__actions__close">Close</label> 
 
    </li> 
 
    </ul> 
 
</div>

ウェブサイト：https://uatweb.hippowaste.co.uk/（のみモバイル版）

出典

2017-05-23 Charlie McShane