From 2dac12c577e0c7a5310857389dbda2b2b3dfadd1 Mon Sep 17 00:00:00 2001 From: David Date: Wed, 27 May 2020 16:34:01 +0200 Subject: [PATCH] fix(header): large title transition works on older versions of iOS (#21339) --- core/src/components/header/header.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index 29a53447858..17f623114e5 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -64,6 +64,13 @@ export class Header implements ComponentInterface { const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner'); const contentEl = (pageEl) ? pageEl.querySelector('ion-content') : null; + // Cloned elements are always needed in iOS transition + writeTask(() => { + const title = cloneElement('ion-title') as HTMLIonTitleElement; + title.size = 'large'; + cloneElement('ion-back-button'); + }); + await this.setupCollapsibleHeader(contentEl, pageEl); } } @@ -127,10 +134,6 @@ export class Header implements ComponentInterface { this.scrollEl!.addEventListener('scroll', this.contentScrollCallback); writeTask(() => { - const title = cloneElement('ion-title') as HTMLIonTitleElement; - title.size = 'large'; - cloneElement('ion-back-button'); - if (this.collapsibleMainHeader !== undefined) { this.collapsibleMainHeader.classList.add('header-collapse-main'); }