bug: collapsible large title begins to show toolbar when native ios refresher finishes #22829
Description
Bug Report
Ionic version:
[ ] 4.x
[x] 5.x
Current behavior:
When pulling to refresh, the top IonHeader/Toolbar will start flickering for a moment when the refresh starts, and once again when the refresh event ends.
Expected behavior:
Expecting no flickering at all.
Steps to reproduce:
On a new blank Vue app, simply add the collapsible header and an IonRefresher in Home.vue
Set IonToolbar color to primary.
Run app and do pull to refresh.
Related code:
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar color="primary">
<ion-title>Blank</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content pullingIcon="lines"></ion-refresher-content>
</ion-refresher>
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
<strong>Ready to create an app?</strong>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
</ion-content>
</ion-page>
</template>
/* Pull to refresh is just a 1 second timeout for this purpose*/
const doRefresh = (e: any) => {
setTimeout(() => {
e.target.complete();
}, 1000);
}
Other information:
This seems to be happening only if using collapsible iOS titles.
It does not happen on Android at all.
Ionic info:
Ionic:
Ionic CLI : 6.12.3 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 5.5.2
Capacitor:
Capacitor CLI : 2.4.6
@capacitor/core : 2.4.6
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v15.5.1 (/usr/local/Cellar/node/15.5.1/bin/node)
npm : 7.3.0
OS : macOS Catalina
