DIVがAndroid 4.2でスクロールしていない

Question

タイトルと同じように、私はAndroid 4.2のデフォルトブラウザでスクロールできないdivをコード内に持っています。ここで

はHTMLである：ここでは

<div class="slider"> 
    <div class="slider-list"> 
     <div class="slide active-slide"> 
      <section class="content auth"> 
       <h1>Vérification de l'identité</h1> 
       <label for="authentication-0">Veuillez saisir votre date de naissance pour vous authentifier (JJ/MM/AAAA)</label> 
       <input placeholder="Champ obligatoire" type="text" id="authentication-0" name="authentication[430]" class="form-control auth-field" required="" data-map="430"> 
      </section> 
      </div> 
      <div class="slide"> 
      <section class="content hide"> 
       <h2>Bienvenue</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam enim nisl, fermentum id nunc et, imperdiet blandit nisi. Integer risus sapien, placerat sit amet vestibulum ut, dictum vitae elit. Sed eu sollicitudin nisi. Vestibulum et pulvinar lacus, et ultricies purus. Integer elementum mi erat, id dignissim purus tincidunt at. In placerat tempor mi, viverra maximus purus convallis vitae. Morbi laoreet in arcu id finibus. Suspendisse potenti.</p> 
       <h2>Mode opératoire</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam enim nisl, fermentum id nunc et, imperdiet blandit nisi. Integer risus sapien, placerat sit amet vestibulum ut, dictum vitae elit. Sed eu sollicitudin nisi. Vestibulum et pulvinar lacus, et ultricies purus. Integer elementum mi erat, id dignissim purus tincidunt at. In placerat tempor mi, viverra maximus purus convallis vitae. Morbi laoreet in arcu id finibus. Suspendisse potenti.</p> 
       <h2>Votre dossier</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam enim nisl, fermentum id nunc et, imperdiet blandit nisi. Integer risus sapien, placerat sit amet vestibulum ut, dictum vitae elit. Sed eu sollicitudin nisi. Vestibulum et pulvinar lacus, et ultricies purus. Integer elementum mi erat, id dignissim purus tincidunt at. In placerat tempor mi, viverra maximus purus convallis vitae. Morbi laoreet in arcu id finibus. Suspendisse potenti.</p> 
      </section> 
     </div> 
    </div> 
</div> 
<div class="content-button"> 
    <button role="button" class="suivant next">Suivant</button> 
    <div style="font-size: 0" class="rs-boutons-recap"> 
     <button role="button" class="bouton-recommencer">Recommencer</button> 
     <button role="button" class="bouton-modifier"><span class="progress"></span><span class="btn-label">Modifier</span></button> 
     <button role="button" class="bouton-valider"><span class="progress"></span><span class="btn-label">Valider</span></button> 
    </div> 
</div> 

はCSSです：

* { 
    margin: 0; 
    box-sizing: border-box; 
    text-decoration: none; 
    outline: none; 
    border-style: none; 
} 

html, body { 
    font-size: 16px; 
    height: 100%; 
    width:100%; 
    font-family: 'Tahoma',Arial,sans-serif; 
} 

.slider{ 
    height: calc(100% - 220px); 
    position:fixed; 
    top:70px; 
}   

.slider{ 
    width: 100%; 
    overflow: auto; 
} 

.slider div.slider-list, .slider div.slider-list div.slide{ 
    height: 100%; 
    width: 100%; 
} 

.slide{ 
    display:none; 
    -webkit-overflow-scrolling: touch; 
} 

.slide.slider-active{ 
    display:block !important; 
} 

.content { 
    width: 80%; 
    margin: auto; 
    height: 100%; 
    padding:5% 10% 0 10%; 
} 

.content-button { 
    width: 80%; 
    height: 100px; 
    margin: 0 10%; 
    padding: 0; 
    text-align: right; 
    position: fixed; 
    bottom: 50px; 
    z-index:800; 
} 

私は.nextボタンのクリックで、「.activeスライドをフェードアウト、JSスクリプトを持っていますDOM内の次の ".slide"をフェードインします。

しかし、2番目のスライドのスクロールはAndroid 4.2では動作しません（デフォルトブラウザではChromeを使用して正常に動作します）。それは、Android 4.4以降で素晴らしい作品

、iOSとデスクトップ（クローム、IE9、FF、...）

は、誰もが私が行方不明です何上の任意のアイデアを得るでしょうか？

ありがとうございました:)

Answer 1

calc（）はAndroid 4.3以降ではサポートされていません。

http://caniuse.com/#feat=calc

私は.sliderは、スクロールが発生しませんを意味し、その高さを設定されていない気がします。

calc（）が原因であるかどうかをテストするには、静的な高さの値を設定してみてください。