Positionnement différent entre iOS7 et iOS6

Bonjour

je positionne des éléments en absolu, cela fonctionne corectement sur les différents navigateurs des ordinateurs, sous les android que j'ai pu tester. Mais sous Ios6 avec Safari ou Chrome (v36) une partie des éléments se retrouvent beaucoup plus haut , vers le milieu de la page, sous Ios7 tout est dans l'ordre. Je n'ai pas trouvé beaucoup de littérature sur le net concernant ce problème, j'ai vu ça http://css-tricks.com/forums/topic/a...ios6-and-ios7/, mais ça ne m'aide pas beaucoup.

Le problème survient sur l'id buzzer1 et la class"perso1 perso3"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="grid_3 push_1" id="cadre3">
  <form  action="score.php" method="post">
 <input type="submit" value="" name="3" >
    <figure class="perso1 perso3"><img src="../images/pesonnage-buzzer.svg" class="perso"></figure>
 
 
    <figure id="buzzer1"><img src="../images/buzzer.svg"/></figure>
    <div class="rayon"></div>
    <div id="piedbuzzer1"></div>
     <!-- réponse3 variable PHP -->
    <div  id="repons3-1" class="modif">
      <div id="repons3-2" class="modif"><?php echo $rep3 ?></div>
    </div>
     <input type="hidden" name="val" value="3">
  <input type="hidden" name="id" value="<?php echo $id ?>">
  </form></div>
  <div>
 <figure id="cadrscore"><img src="../images/barinfo.png" /></figure>
<div  id="cadrscoretxt">Candidat vous avez 100pt</div></div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#buzzer1 {
	position: absolute;
	-webkit-transform-origin:bottom;
	transform-origin:bottom;
	z-index: 20;
	bottom: 30px;
	left: 20%;
	width: 50%;
}
 
#piedbuzzer1 {
	position: absolute;
	z-index: 10;
	bottom: 0%;
	left: 31%;
	width: 25%;
	height: 30px;
	max-height:50px;
	background-color: rgba(0,255,102,1);  
}
 
.perso1 {
	position:absolute;
	width:70%;
	left:14%;
	z-index:8;
 
}
 
.perso2 {
	left:14%;
 
}
 
.perso3 {
 
	left:14%;
 
}