在iOS上滑动期间的离子渲染问题 [英] Ionic rendering issue during swipe on iOS

问题描述

在下面的视频中，正在向右滑动。在标题部分，带有所有/类/产品的工具栏落后于背景图像的消失（有没有办法让背景图像跟随滑动？ ）此外黄色加号移动超过 40px 然后在落后于标题其余部分的消失后消失。

In the video below, a swipe to the right is happening. In the header section, the toolbar with All/Classes/Products lags behind the disappearance of the background image (is there a way to make the background image follow along with the swipe?) Also the yellow plus sign moves over about 40px and then disappears after lagging behind the swipe/disappearance of the rest of the header.

我的 ion-header HTML如下所示：

My ion-header HTML looks like this:

<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;
    }

感谢任何帮助。谢谢。

推荐答案

这里的问题是两者都是 #iontoolbar 和.pluscontainer的CSS定位绝对。

THe problem here is that both the #iontoolbar and .pluscontainer has the CSS positioning absolute.

有时在绝对和固定定位元素上运行转换将导致元素看起来好像落后。嵌套时它们变得更加波动。

And sometimes running transitions on absolute and fixed positioned elements will cause the elements to appear as if they're lagging behind. And they become even more choppy when nested.

说实话，我不知道为什么会发生这种情况的具体细节，但根据我自己的经验，这是最糟糕的移动游猎。我建议你对HTML和CSS结构做一些调整。我谦虚地认为为什么这些元素应该具有 position：absolute; ，但可以通过相对定位轻松完成。

To be honest, I don't know the exact details as to why this is happening, but in my own experience this is worst in mobile safari. I would suggest you make some adjustments to your HTML and CSS structure. There's no reason in my humble opinion as to why these elements should have position: absolute; at all, but can be easily done with relative positioning.

试一试，让我知道。

这篇关于在iOS上滑动期间的离子渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！