DIV가 Android 4.2에서 스크롤하지 않음

Question

제목에서 알 수 있듯이 Android 4.2의 기본 브라우저에서 스크롤 할 수없는 div 코드가 있습니다.

* { 
    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; 
} 

나는 다음 내용 버튼을 클릭에서 ".active는 슬라이드를 페이드 아웃하는 JS 스크립트를 가지고 : 여기

<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입니다 : 여기

는 HTML입니다 "다음 DOM에서"찌그러 뜨려 "사라집니다.

그러나 두 번째 슬라이드의 스크롤은 Android 4.2에서 작동하지 않습니다 (기본 브라우저에서는 Chrome을 사용하여 예상대로 작동).

그것은

사람이 내가 놓친 거지 무엇에 어떤 생각을 하는가 (... 크롬, IE9, FF) 안드로이드 4.4 이상, iOS 및 바탕 화면에 잘 작동?

고맙습니다.

Answer 1

calc()는 Android 4.3 이하 버전에서 지원되지 않습니다.

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

나는 느낌의 .slider가 발생하지 않습니다 스크롤을 의미 높이를 설정하지 않습니다 있습니다.

calc()가 범인인지 정적 높이 값을 테스트하도록 설정하십시오.