角膜チラシの問題：マップ以外の他の部分は、ページに2回目を表示しません。

Question

角膜チラシの問題：マップ以外の他の部分は、ページに入る2度目を示していません。 マップ関数を開発するために、イオンと角リーフレットを使用しています。 iPhoneでは、iOS10ではこの問題が発生しますが、ブラウザでは正常に動作します。

図1に示すように、右下隅のパネルは、マップを1〜2回タップするまで、ページに2回目を表示しません。しかし、私がページに入るのは初めてです。

コードは以下の通りである：

<div data-tap-disabled="true" class="map-container" style="height:100%"> 

<leaflet id='mapbox' defaults="defaults" tiles="tiles" lf-center="mapCenter" event-broadcast="events" maxbounds="maxbounds" markers="markersArray" width="100%" height="100%"></leaflet> 

</div> 

<div class="button-panel"> 
    <div class="tripguide-icon-hotel" ng-click="selectSitesAround(1)" ng-class="{selected:hotelSelected, deselected:!hotelSelected}"></div> 
    <div class="tripguide-icon-poi" ng-click="selectSitesAround(2)" ng-class="{selected:poiSelected, deselected:!poiSelected}"></div> 
    <div class="tripguide-icon-dining" ng-click="selectSitesAround(3)" ng-class="{selected:diningSelected, deselected:!diningSelected}"></div> 
    <div class="tripguide-icon-list" ng-click="clickList()" ng-class="{deselected:!listSelected}"></div> 
</div> 

CSS：

.button-panel { 
    z-index: 1000; 
    opacity: 0.85; 
    width: 76px; 
    right: 80px; 
    bottom: 128px; 
    position: absolute; 
} 

Answer 1

私はイオンのディレクティブを使用して代わりにdiv要素を使用してこの問題を解決しました。

<ion-pane class="map-panel-pane"> 
<div class="button-panel"> 
    <div class="tripguide-icon-hotel" ng-click="selectSitesAround(1)" ng-class="{selected:hotelSelected, deselected:!hotelSelected}"></div> 
    <div class="tripguide-icon-poi" ng-click="selectSitesAround(2)" ng-class="{selected:poiSelected, deselected:!poiSelected}"></div> 
    <div class="tripguide-icon-dining" ng-click="selectSitesAround(3)" ng-class="{selected:diningSelected, deselected:!diningSelected}"></div> 
    <div class="tripguide-icon-list" ng-click="clickList()" ng-class="{deselected:!listSelected}"></div> 

</div> 
</ion-pane>