Ionic rendering issue while scrolling on iOS

Question

The video below scrolls right. In the title section, the toolbar with All/Classes/Products lags behind the disappearance of the background image (is there a way to make the background image with the arrow?) Also, the yellow plus sign moves about 40px , and then disappears after lagging behind the napkin / 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 is that both #iontoolbar and .pluscontainer have CSS absolute positioning.

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

Honestly, I don’t know the exact details of why this is happening, but in my own experience this is worst of all in mobile safaris. I would suggest you make some changes to the structure of HTML and CSS. There is no reason for my humble opinion as to why these elements should have position: absolute; in general, but they can be easily done with relative positioning.

Try and let me know.