diff --git a/src/core/components/split-view/split-view.ts b/src/core/components/split-view/split-view.ts index f5b15ab49..b08eea849 100644 --- a/src/core/components/split-view/split-view.ts +++ b/src/core/components/split-view/split-view.ts @@ -24,6 +24,8 @@ export enum CoreSplitViewMode { MenuAndContent = 'menu-and-content', // Shows both menu and content. } +const disabledScrollClass = 'disable-scroll-y'; + @Component({ selector: 'core-split-view', templateUrl: 'split-view.html', @@ -36,6 +38,7 @@ export class CoreSplitViewComponent implements AfterViewInit, OnDestroy { @Input() placeholderText = 'core.emptysplit'; @Input() mode?: CoreSplitViewMode; isNested = false; + disabledScrollOuterContents: HTMLIonContentElement[] = []; private outletRouteSubject: BehaviorSubject = new BehaviorSubject(null); private subscriptions?: Subscription[]; @@ -59,6 +62,9 @@ export class CoreSplitViewComponent implements AfterViewInit, OnDestroy { */ ngAfterViewInit(): void { this.isNested = !!this.element.nativeElement.parentElement?.closest('core-split-view'); + + this.disableScrollOnParent(); + this.subscriptions = [ this.contentOutlet.activateEvents.subscribe(() => { this.updateClasses(); @@ -79,6 +85,8 @@ export class CoreSplitViewComponent implements AfterViewInit, OnDestroy { */ ngOnDestroy(): void { this.subscriptions?.forEach(subscription => subscription.unsubscribe()); + + this.enableScrollOnParent(); } /** @@ -122,4 +130,30 @@ export class CoreSplitViewComponent implements AfterViewInit, OnDestroy { return CoreSplitViewMode.MenuAndContent; } + /** + * Will disable scroll on parent ion contents to enabled PTR on the ones inside the splitview. + * This error only happens on iOS. + * Another manual solution is to add scroll-y=false on the ion-contents outside the split view. + */ + protected disableScrollOnParent(): void { + let outerContent = this.element.nativeElement.parentElement?.closest('ion-content'); + while (outerContent) { + if (outerContent?.getAttribute('scroll-y') != 'false' && !outerContent?.classList.contains(disabledScrollClass)) { + outerContent.classList.add(disabledScrollClass); + this.disabledScrollOuterContents.push(outerContent); + } + + outerContent = outerContent.parentElement?.closest('ion-content'); + } + } + + /** + * Will enable scroll on parent ion contents previouly disabled. + */ + protected enableScrollOnParent(): void { + this.disabledScrollOuterContents.forEach((outerContent) => { + outerContent.classList.remove(disabledScrollClass); + }); + } + } diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss index fb3837155..00952316a 100644 --- a/src/core/components/tabs/tabs.scss +++ b/src/core/components/tabs/tabs.scss @@ -12,6 +12,7 @@ ion-tab-bar.core-tabs-bar { position: relative; width: 100%; + height: auto; background: var(--tabs-background); color: var(--tabs-color); -webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow))); diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss index a7a70d8d4..ddfe61715 100644 --- a/src/core/features/mainmenu/pages/menu/menu.scss +++ b/src/core/features/mainmenu/pages/menu/menu.scss @@ -35,6 +35,7 @@ ion-tab-button { width: 100%; + height: auto; ion-badge { top: calc(50% - 20px); } diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index a1c7ac7fd..967e2b05e 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -628,3 +628,12 @@ ion-input .native-input { ion-checkbox { --border-radius: 2px; } + +// Disable scroll on parent ion contents to enabled PTR on the ones inside the splitview. See split-view component for more info. +ion-content.disable-scroll-y::part(scroll) { + touch-action: auto; + overflow-y: hidden; + overscroll-behavior-y: auto; + z-index: auto; + will-change: auto; +}