DIV无法在Android 4.2上滚动

Question

As said in the title, I have in my code a div that I can not scroll on the default browser on Android 4.2 (and probably lower).

Here is the 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>

Here is the 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;
}

I have a JS script that, on click on .next button, fades out the ".active-slide" and fades in the next ".slide" in the DOM.

However, the scroll on that second slide does not work on Android 4.2 (with default browser - working as expected using Chrome).

It works great on Android 4.4+, iOS and desktop (Chrome, IE9, FF,...)

Does anyone get any idea on what I am missing ?

Thank you guys :)

Answer 1

calc() is not supported for Android 4.3 and down.

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

I have a feeling .slider is not setting its height which means the scroll won't fire.

Try setting a static height value to test if calc() is the culprit.