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>