Problème de rendu ionique lors du balayage sur iOS

Dans la video ci-dessous, un glissement vers la droite est en cours. Dans la section d'en-tête, la barre d'outils All/Classes/Products est en retard sur la disparition de l'image d'arrière-plan (existe-t-il un moyen de faire suivre l'image d'arrière-plan?) après avoir traîné derrière le balayage / la disparition du rest de l'en-tête.

Mon HTML ion-header HTML ressemble à ceci:

 <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="classs toolbarstyle" #classsFeed ion-button color="black" (tap)="products()">Classes</button> <button class="products toolbarstyle" #productsFeed ion-button color="black" (tap)="classs()">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; } 

Toute aide est appréciée, merci.

entrez la description de l'image ici

Le problème ici est que les deux #iontoolbar et .pluscontainer ont le positionnement CSS absolute .

Et parfois, des transitions en cours d'exécution sur des éléments positionnés de façon absolue et fixe entraîneront l'apparition des éléments comme s'ils étaient en retard. Et ils deviennent encore plus saccadés lorsqu'ils sont nesteds.

Pour être honnête, je ne connais pas les détails exacts de la raison pour laquelle cela se produit, mais dans ma propre expérience, c'est le pire dans un safari mobile. Je vous suggère de faire quelques ajustements à votre structure HTML et CSS. Il n'y a aucune raison dans mon humble opinion quant à la raison pour laquelle ces éléments devraient avoir une position: absolute; du tout, mais peut être facilement fait avec un positionnement relatif.

Essayez-le et faites le moi savoir.