javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(header): fix race condition in collapsible header (#20334)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-01-29 15:45:55 -05:00
committed by GitHub
parent fd55427991
commit 215d55f1eb
2 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/components/header/header.tsx
View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Host, Prop, h, readTask, writeTask } from '@stencil/core'; import { Component, ComponentInterface, Element, Host, Prop, h, writeTask } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global'; import { getIonMode } from '../../global/ionic-global';
@ -106,9 +106,6 @@ export class Header implements ComponentInterface {
setToolbarBackgroundOpacity(toolbar, 0); setToolbarBackgroundOpacity(toolbar, 0);
}); });
readTask(() => {
const mainHeaderHeight = mainHeaderIndex.el.clientHeight;
/** /**
* Handle interaction between toolbar collapse and * Handle interaction between toolbar collapse and
* showing/hiding content in the primary ion-header * showing/hiding content in the primary ion-header
@ -117,8 +114,7 @@ export class Header implements ComponentInterface {
*/ */
const toolbarIntersection = (ev: any) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex); }; const toolbarIntersection = (ev: any) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex); };
// Subtracting 1 pixel gives us some wiggle room for ensuring everything is reset in different edge cases this.intersectionObserver = new IntersectionObserver(toolbarIntersection, { root: contentEl, threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] });
this.intersectionObserver = new IntersectionObserver(toolbarIntersection, { threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1], rootMargin: `-${mainHeaderHeight - 1}px 0px 0px 0px` });
this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el); this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el);
/** /**
@ -128,7 +124,6 @@ export class Header implements ComponentInterface {
*/ */
this.contentScrollCallback = () => { handleContentScroll(this.scrollEl!, scrollHeaderIndex, contentEl); }; this.contentScrollCallback = () => { handleContentScroll(this.scrollEl!, scrollHeaderIndex, contentEl); };
this.scrollEl!.addEventListener('scroll', this.contentScrollCallback); this.scrollEl!.addEventListener('scroll', this.contentScrollCallback);
});
writeTask(() => { writeTask(() => {
cloneElement('ion-title'); cloneElement('ion-title');

8
core/src/components/header/header.utils.ts
View File

@ -75,7 +75,13 @@ export const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity?: num
const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex) => { const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex) => {
if (!ev[0].isIntersecting) { return; } if (!ev[0].isIntersecting) { return; }
const scale = ((1 - ev[0].intersectionRatio) * 100) / 75; /**
* There is a bug in Safari where overflow scrolling on a non-body element
* does not always reset the scrollTop position to 0 when letting go. It will
* set to 1 once the rubber band effect has ended. This causes the background to
* appear slightly on certain app setups.
*/
const scale = (ev[0].intersectionRatio > 0.9) ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
mainHeaderIndex.toolbars.forEach(toolbar => { mainHeaderIndex.toolbars.forEach(toolbar => {
setToolbarBackgroundOpacity(toolbar, (scale === 1) ? undefined : scale); setToolbarBackgroundOpacity(toolbar, (scale === 1) ? undefined : scale);