css - iPad Web アプリにより、一部の div が表示されない

Question

Chrome と Safari (iPad) では、すべてが正常に表示されます。ただし、「ホーム画面に追加」すると、背景画像のみが表示され、他の div は表示されません。他の div の z-index または位置と関係があるのではないかと思いますが、どうすればよいかわかりません。

CSS

#map{ background: url('img/map.png');} 

#map_gate{
z-index: 100;
width: 299px;
height: 313px;
top: 149px;
left: 539px;
position: absolute;
background: url('img/map_gate_closed.png');}

#map_dora{
z-index: 200;
width: 65px;
height: 91px;   
top: 473px;
left: 83px;
position: absolute;
background-image:url('img/map_dora.png');} 

.background{
z-index: 1;
top: 0;
left: 0;    
width: 1024px;
height: 768px;
position: fixed;    
display: none;
overflow: hidden;}

.selected_area {
z-index: 10;
text-align:center;
position: fixed;    
display: none;
/*background-repeat:no-repeat;*/
overflow: hidden;}

HTML

<div id="map" class="background map"></div>
<div id="map_gate" class="selected_area map"></div>
<div id="map_dora" class="selected_area map"></div>