CSS z-index nicht richtig funktioniert auf iphone

Question

Hallo Ich habe diese App auf ionische, wo ich eine große Kiste, wo ich in Mengen so:

aber auf meinem iphone es zeigt es wie folgt aus: html:

<div class="wrapperz"> 

     <!--DIT IS BOVENSTE STUKJE--> 


     <div class="productimagehead"> 
      <img class="productimage" src="img/thumb_w800.jpg"/> 
      <h1 class="imagetext">Alle producten</h1> 
      <div class="menu" ng-click="menuToggle =! menuToggle"><img class="menuicon" src="img/button.svg" alt=""/></div> 
      <div class="cart"><a href="#/cart"><img class="carticon" src="img/cartbuttonlight3.svg"/></a> 

      <div class="cartamount"><a href="#/cart">{{cartamount}}</a></div> 

      </div> 
      </div> 

     </div> 

    <!--END BOVENSTE DEEL--> 
    <div class="tableheader"> 
    <div class="plongtext"><p>Naam</p></div> 
    <div class="pmidtext"><p>Prijs</p></div> 
    <div class="prighttext"><p></p></div> 
    </div> 
    <!--BEGIN DE REST--> 
    <div class="productlist"> 
     <div class="producttable"> 
      <ion-content scroll="false"> 
      <div ng-model="products" ng-repeat="p in products"> 

      <div class="products" ng-class-even="'even'" ng-class-odd="'odd'"> 
       <div class="productlongtext"> <p>{{p.name}}</p> </div> 
       <div class="productmidtext" ><p>&euro; {{p.price}}</p></div> 
       <div class="productrighttext" ><p> <a ng-click="showOrder = !showOrder"><img class="cartbutton" src="img/cart3.svg"/></a> <a href="#/product/{{p.id}}"> <img class="info" src="img/info.svg" alt=""/></a></p></div> 
      </div> 
       <div ng-show="showOrder" class="z"> 
       <div class="order" ng-click="showOrder = !showOrder"> 
       </div> 
       <form name="amountForm" ng-submit="submitForm()" ng-controller="CartAddController" class="productform"> 
        <input type="hidden" ng-model="productid" ng-init='productid = [this.p.id]' > 
        <div class="formproductname"><h2>{{p.name}}</h2></div> 
        <div class="formproductprice">Prijs: &euro;{{p.price * amount}}</div> 
        <div class="formproductamount" prd-add ng-model="amount"> 
        </div> 
        <div class="formproductadd"> 
        <div class="formorderbutton"> 
         <button type="submit" class="confirm" ng-click="$parent.showOrder = false"> Verstuur </button> 
        </div> 
        </div> 
       </form> 
       </div> 
      </div> 
      <div class="loadmore" ng-click="loadMore()"><p>Laad meer producten</p></div> 
      </ion-content> 
     </div> 
    </div> 

ich habe versucht, das Hinzufügen translatez (0), translate3d und tat eine Menge Dinge mit Z-Index, aber ohne Erfolg. Es funktioniert, wenn ich das Eingabeformular ganz oben in meinem HTML-Code setze, aber dann kann ich es nicht wiederholen.

CSS:

.wrapperz{ 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     margin: 0; 
     padding: 0; 
     height: auto; 
     position: absolute; 
    } 
     .imagetext{ 
      position: absolute; 
      width: 100%; 
      color: #ffffff; 
      bottom: 0; 
      float: left; 
      margin-left: 5%; 
     } 
    .productimagehead{ 
      top: 0; 
      width: 100%; 
      height: 25%; 
      position: relative; 
     } 
     .productimage{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      background-size: 100% 100%; 
     } 
     .productlogo{ 
      display: none; 
     } 
     .menuicon { 
      background: none; 
      height: 100%; 
      float: left; 
      margin: 0; 
      line-height: 0; 
     } 
     .cart { 
      position: relative; 
      height: 30%; 
      width: 15%; 
      margin-top: 5%; 
      padding-top: 5%; 
      float: left; 

     } 
     .carticon { 
      background: none; 
      height: 100%; 
      float: left; 
     } 
     .cartamount{ 
      color: #ffffff; 
      position: absolute; 
      font-size: 70%; 
      margin-top: 10%; 
      right: 15%; 
     } 
    .tableheader{ 
      background-color: #333333; 
      border: none; 
      height: 10%; 
      padding-left: 5%; 
      width: 95%; 
      position: relative; 
      top: 25%; 
      font-size: 100%; 
     } 
     .productlist{ 
      width: 100%; 
      margin-left: 0; 
      height: 65%; 
      background-color: #ffffff; 
      position: absolute; 
      float: right; 
      top: 35%; 
      left: 0; 
      right: 0; 
      overflow-y: scroll; 
      -webkit-overflow-scrolling: touch; 
     } 
    .producttable{ 
     width: 100%; 
     border: none; 
     font-size: 100%; 
    } 
    .products{ 
     position: relative; 
     width: 95%; 
     padding-left: 5%; 
     height: 15%; 
    } 
    .order{ 
     background-color: #3e3e3e; 
     opacity: 0.7; 
     height: 100%; 
     width: 100%; 
     position: fixed; 
     z-index: 999; 
     top: 0; 
     -webkit-backface-visibility: hidden 

    } 
    .productform{ 
     top: 0px; 
     display: block; 
     position: fixed; 
     height: 30%; 
     width: 70%; 
     background-color: #252525; 
     color: snow; 
     margin-left: 15%; 
     margin-top: 40%; 
     z-index: 999; 
    } 
    .z{ 
     z-index: 1000; 
    } 

Answer 1

Nicht wirklich eine Lösung, aber man kann einfach das Element bewegen (z) ein wenig nach unten, gibt es eine Menge freien Raum sowieso;)

Btw gibt es kein Z-Index für tableheader Klasse, würde ich vorschlagen, einige z-index:-999 hier zu setzen.