滑動動畫滯后-ionic / CSS

Question

這是正在發生的事情：

我以前遇到過這個問題，並且已經成功回答了：

在iOS上滑動時出現離子渲染問題

但是此頁面的構建稍有不同...並且甚至在取出所有position: absolute位於標頭中（滯后的CSS所在的位置），正如我在上述問題中正確提出的那樣，它仍然滯后。 還有其他原因可能會發生嗎？

這是我的代碼：

標頭HTML

<ion-header> <!--[@slideDown]="downState"-->
  <div (swiperight)="swipeRight()" (swipeleft)="swipeLeft()">
    <ion-toolbar #clickme class="itemadspace" [@slideDown]="downState" no-padding> <!--[@slideDown]="downState"-->
      <!--<ion-item class="ad" no-padding no-lines>-->
      <div class="stylistview">
        <button class="stylistviewbutton" (tap)='switchView()' ion-button color="secondary">User View</button>
      </div>

      <swiper #swiper [config]="config" [(index)]="swiperIndex" (indexChange)="indexChange()">
        <div *ngFor="let ad of ads; let i = index" class="adcontainer">
          <img src="{{ad}}" class="adimage" #adimage>
        </div>
      </swiper>
    </ion-toolbar>

    <!--</ion-item>-->
    <div class='pluscontainer' [@plusSlide]="downState">
      <p>BUY</p><br><p>AD</p>
    </div>

    <div class="clickme" (tap)="toolClicked($event)">
      <ion-navbar  color="black" [@toolSlide]="toolbarState" id="iontoolbar"> <!--[@toolSlide]="toolbarState"-->
        <ion-icon class='custom-icon' name="play"></ion-icon>
        <button class="all toolbarstyle" #allF ion-button color="black" (tap)="all()">All</button>
        <button class="classes toolbarstyle" #classesFeed ion-button color="black" (tap)="classes()">Classes</button>
        <button class="products toolbarstyle" #productsFeed ion-button color="black" (tap)="products()">Products</button>
        <button class="formulas toolbarstyle" #formulasFeed ion-button color="black" (tap)="formulasList()">Formulas</button>
      </ion-navbar>
    </div>
  </div>
</ion-header>

相關CSS

.itemadspace {
    z-index: 1;
    top: 0;
    left: 0;
    background-color: black;
    text-align: center;
}

.stylistviewbutton {    
    font-size: 12px;
}

.stylistview {
    text-align: right;
    position: absolute;
    top: 0px;
    right: 24%;
    z-index: 5;
    width:5%;
}

.adcontainer {
    width: 100%;
    height: 100%;
}

.adimage {
    width: auto;
}

.pluscontainer {
    position: fixed;
    z-index: 2;
    right: 0px;
    top: 60px;
    background-color: rgba(0,0,0,0.7);
    color: map-get($colors, primary);
    text-align: center;
    padding: 4px;
}

#iontoolbar {
    z-index: 1;
    top: 0;
    left: 0;
    background-color: black;
    color: white;
    border-bottom-style: solid;
    border-bottom-color: map-get($colors, primary);
    border-bottom-width: 4px;
}

.custom-icon {
    color : gray;
    font-size: 28px;
    margin-left: 10px;
    vertical-align: middle;
    margin-top: 8px;
}

.all {
    margin-left: 10px;
}

.toolbarstyle {
    font-size: 12px;
    padding: 0 0.5em;
    color: gray;
    background-color: black;
}

.toolbarstyle:focus {
    color: map-get($colors, primary);
}

ion-toolbar {
    div.toolbar-background {
        //background-image: url('../img/tresemme.png') !important;
    //background-repeat: no-repeat;
        //background-size: cover;
        background-color: #000000;
    }
}

swiper.s-wrapper>.swiper .swiper-wrapper .swiper-slide, swiper.s-wrapper>.swiper .swiper-wrapper .swiper-slide-content {
    overflow: auto;
    max-height: 100%;
    max-width: 77%;
}

.swiper-wrapper {
    height: 300px;
}

我還發現它已被標題使用...並且它的position: absolute -這會使所有內容搞砸了嗎？

ion-header {
  @include position(0, null, null, 0);

  position: absolute;
  z-index: $z-index-toolbar;
  display: block;

  width: 100%;
}

我試過沒有position: absolutes/fixed ，但用position: relative替換了一些-但這沒有幫助。 任何幫助將非常感謝。

Answer 1

嘗試安裝ionic-WKWebview並驗證動畫是否正常運行。 您可以從這里獲取離子wkwebview。 大多數UI問題都可以通過使用上述插件解決。

更新：從你的評論提到，

動畫只是將選項傳遞給導航控制器以動畫化頁面更改時使用的動畫...滯后應該只是頁面流暢滑動

是的，在您的問題中您沒有提到如何通過navcontroller進行動畫處理，如果還沒有使用過該方法，那么這是設置動畫的另一種方法

 var navOptions = {
      animation: 'ios-transition'
 };
 this.navController.push(yourpagename, null, navOptions);