Scrolling z-index iOS 7.1.2

Bonjour.

Je souhaite faire un menu déroulant pour la version mobile d'un site web.

J'ai tout d'abord une barre fixe:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="row" id="menu_responsive">
	<div class="col-xs-3 col-sm-2 col-md-1" id="panier_menu_responsive">
		<a href="panier.aero"><div class="glyphicon glyphicon-shopping-cart"></div></a> <span class="badge">{$QUANTITE_TOTALE|default:'0'}</span>
	</div>
 
	<div class="col-xs-3 col-sm-2 col-md-1" id="loupe_menu_responsive">	
		<a onClick="afficherBarreRecherche('barre_de_recherche')"><div class="glyphicon glyphicon-search"></div></a></span>
	</div>
 
	<div class="col-xs-offset-3 col-xs-3 col-sm-offset-6 col-sm-2 col-md-offset-9 col-md-1" id="hamburger_menu_responsive">
		<a onClick="afficherMenu('menu_deroule_responsive')"><div class="glyphicon glyphicon-menu-hamburger"></div></a>
	</div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
 
	#menu_responsive {
		position: fixed;
		background-color: #222222;		
		height: 30px;
		margin: 0;
		padding-top:5px;
		z-index:7;
		width: 100%;
	}

...qui déroule mon menu:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<div class="row" id="menu_deroule_responsive">
	<div id="content_menu_deroule_responsive">
		<div class="divider_line"></div>
		<div class="col-xs-12">
			<a href="index.aero"><div class="glyphicon glyphicon-home"></div> Accueil</a>
		</div>
		<div class="divider_line"></div>
		<div class="col-xs-12">
			<a onClick="afficher('rayons_menu_responsive')"><div class="glyphicon glyphicon-list"></div> Rayons et gammes<span class="caret"></span></a>
		</div>
                 ...
                 ...
                 ...
        </div>
</div>
 
<div class="container">    
// le contenu du site
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
#menu_deroule_responsive {
    display: none;
    position: absolute;
    top: 30px;
    width: 100%;
    margin: 0;
    background-color: #222222;			
    z-index: 6;
    padding-left:5px;
}
 
#content_menu_deroule_responsive {
    position: relative;
    top: 0;
    left: 0;			
}

Or lorsque je déroule mon menu et que j'essaie de scroller (avec le doigt) je vois que c'est la div container en dessous qui scrolle, et non mon menu.
J'ai lu beaucoup de solution sur le net en anglais à base de -webkit-overflow-scrolling: touch; mais ça n'a jamais fonctionné. Surement car je ne l'avais pas mis au bon endroit.

J'ai donc besoin de votre aide :)

EDIT: j'ai oublié de spécifier que le comportement voulu fonctionne bien sous Android