在iOS上滑动期间的离子渲染问题

Question

在下面的视频中,向右滑动即将发生.在标题部分,工具栏All/Classes/Products滞后于背景图像的消失(是否有一种方法可以使背景图像跟随滑动？)黄色加号也会移动一遍40px,然后在滑动后面消失/消失其余头部消失了.

我的ion-headerHTML看起来像这样:

<ion-header #ionheader (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')"> <!--[@slideDown]="downState"-->
  <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>

    <!--</ion-item>-->
  </ion-toolbar>

  <div (tap)="loadPost()" class='pluscontainer' [@plusSlide]="downState">
    <ion-icon class='plussy' name="add"></ion-icon>
  </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)="products()">Classes</button>
      <button class="products toolbarstyle" #productsFeed ion-button color="black" (tap)="classes()">Products</button>
    </ion-navbar>
  </div>
</ion-header>

CSS:

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

        }
    }

.itemadspace {
        z-index: 1;
        top: 0;
        left: 0;
        text-align: center;
        height: 88px;
    }

.pluscontainer {
        position: absolute;
        z-index: 2;
        right: 10px;
        top: 28px;
    }

.plussy {
        font-size: 72px;
        font-weight: 700;
        color: map-get($colors, primary);
        /*position: relative;*/
    }

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

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

任何帮助表示赞赏,谢谢.

Answer 1

这里的问题是 和#iontoolbar.pluscontainer 都有 CSS 定位absolute。

有时，在绝对和固定定位的元素上运行过渡会导致元素看起来好像落后了。当它们嵌套时，它们会变得更加不稳定。

老实说，我不知道为什么会发生这种情况的确切细节，但根据我自己的经验，这在移动游猎中是最糟糕的。我建议您对 HTML 和 CSS 结构进行一些调整。以我的拙见，没有理由解释为什么这些元素应该具有position: absolute;，但可以通过相对定位轻松完成。

尝试一下并告诉我。