Ionic rendering issue during swipe on iOS

Question

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.

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

Any help is appreciated, thanks.

Answer 1

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.

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.

Give it a try and let me know.