Ion-slides bug on ipad


#1

i create a page with many element.

this is my structure

<!--
  Generated template for the Townsdetails page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{item.name}}</ion-title>
  </ion-navbar>
</ion-header>



<ion-content>

  <img src="http://www.cinemairis.it/wp-content/uploads/partners/{{item.id}}.jpg">

<ion-grid id="category">
    <div class="title">
      <h6>{{item.categories}}</h6>
    </div>
 </ion-grid>

  <ion-row class="icon-menu">
    <ion-col width-25>
      <a href="tel:{{item.tel}}">
      <i class="fa fa-phone" aria-hidden="true"></i>
      </a>
    </ion-col>
    <ion-col width-25>
      <a href="tel:+393314042263">
      <i class="fa fa-facebook" aria-hidden="true"></i>
      </a>
    </ion-col>
    <ion-col width-25>
      <i class="fa fa-location-arrow" aria-hidden="true" (click)="scrollTo('section-map')"></i>
    </ion-col>
    <ion-col width-25>
      <i class="fa fa-tripadvisor" aria-hidden="true" (click)="scrollTo('section-tripadvisor')"></i>
    </ion-col>
  </ion-row>

 <ion-grid>

    <div class="period">
      <h6>Description</h6>
    </div>
  <ion-row>
    <ion-col>
      <p class="town-desc" [innerHTML]="item.desc"></p>
    </ion-col>
  </ion-row>
 </ion-grid>


  <ion-grid>
    <div>

    </div>
    <div class="period">
      <h6>Events in {{item.name}}</h6>
    </div>
    <ion-list>
      <ion-item *ngFor="let item of items" (click)="itemClicked($event, item)" [ngStyle]="{'background-image': 'url(' + item.cover.source + ')'}">
        <div class="item-container ">
          <div class="date-town">
            <span>{{item.data_inizio}}</span>
            <span>{{item.place.city}}</span>
          </div>
          <div class="title ">
            <h3>{{item.name}}</h3>
          </div>
          <div class="place ">
            <h4>{{item.place.name}}</h4>
          </div>
          <div class="category">
            <span>{{item.category}}</span>
          </div>
        </div>
      </ion-item>
    </ion-list>

    <ion-row *ngIf="total===false" class="today-container">
      <ion-col>
        No Scheduled Event in <br> <span>{{item.name}}</span>
      </ion-col>
    </ion-row>

  </ion-grid>

  <ion-grid id="section-map">
    <div class="period">
      <h6>Map</h6>
    </div>
    <ion-row>
      <ion-col no-padding class="center">
        <h6>
          <ion-icon name="navigate"></ion-icon>
          {{item.address}}
        </h6>
        <div #map id="map" class="map-div"></div>
        <h6 (click)="openMapsApp(item)">
          <ion-icon name="pin"></ion-icon>
          Open maps app
        </h6>

      </ion-col>
    </ion-row>

  </ion-grid>

  <ion-grid id="section-tripadvisor">
    <div class="period" *ngIf="tripadvisoritems">
      <h6>Recent Tripadvisor Reviews</h6>
    </div>

    <ion-slides [options]="sliderOptions">
      <ion-slide *ngFor="let item of tripadvisoritems">
        <div class="item-container ">

          <div class="user">
            <h3>{{item.user.username}}</h3>
          </div>
          <div class="image">
            <img src="{{item.rating_image_url}}">
          </div>

          <div class="text">
            <h3>{{item.title}}</h3>
            <p>{{item.text}}</p>
          </div>
          <div class="date">
            <p>{{item.published_date | DateAnnotation}}</p>
          </div>
          <div class="country">
            <p>{{item.user.user_location.name}}</p>
          </div>

        </div>
      </ion-slide>
    </ion-slides>
  </ion-grid>


  <ion-grid>
    <div>

    </div>
    <div class="period">
      <h6>Events in {{item.name}}</h6>
    </div>
    <ion-list>
      <ion-item *ngFor="let item of items" (click)="itemClicked($event, item)" [ngStyle]="{'background-image': 'url(' + item.cover.source + ')'}">
        <div class="item-container ">
          <div class="date-town">
            <span>{{item.data_inizio}}</span>
            <span>{{item.place.city}}</span>
          </div>
          <div class="title ">
            <h3>{{item.name}}</h3>
          </div>
          <div class="place ">
            <h4>{{item.place.name}}</h4>
          </div>
          <div class="category">
            <span>{{item.category}}</span>
          </div>
        </div>
      </ion-item>
    </ion-list>
    <ion-row *ngIf="total===false" class="today-container">
      <ion-col>
        No Scheduled Event in <br> <span>{{item.name}}</span>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Now the second last element represented by the ion-slide with tripadvisor reviews is overlaps on the last div represented by normal text. i try this in many page and i have the same problem. No problem with iphone or web view.

If i enclose the ion-slide in the ion-card i don’t have a problem

any solution?

this is the bug: