MOBILE-3833 dom: Size does not depend on scroll position

main
Pau Ferrer Ocaña 2022-03-31 14:19:22 +02:00
parent eeb67f3341
commit 82b350c105
2 changed files with 10 additions and 9 deletions

View File

@ -140,10 +140,10 @@ export class CoreLinkDirective implements OnInit {
return this.openLocalFile(href); return this.openLocalFile(href);
} }
if (href.charAt(0) == '#') { if (href.charAt(0) === '#') {
// Look for id or name. // Look for id or name.
href = href.substring(1); href = href.substring(1);
const container = this.element.closest('ion-content'); const container = this.element.closest<HTMLIonContentElement>('ion-content');
if (container) { if (container) {
CoreDom.scrollToElement( CoreDom.scrollToElement(
container, container,

View File

@ -88,10 +88,11 @@ export class CoreDom {
* Check whether an element is visible or not. * Check whether an element is visible or not.
* *
* @param element Element. * @param element Element.
* @param checkSize Wether to check size to check for visibility.
* @return True if element is visible inside the DOM. * @return True if element is visible inside the DOM.
*/ */
static isElementVisible(element: HTMLElement): boolean { static isElementVisible(element: HTMLElement, checkSize = true): boolean {
if (element.clientWidth === 0 || element.clientHeight === 0) { if (checkSize && (element.clientWidth === 0 || element.clientHeight === 0)) {
return false; return false;
} }
@ -193,11 +194,10 @@ export class CoreDom {
element = foundElement; element = foundElement;
} }
await CoreDom.waitToBeVisible(element); await CoreDom.waitToBeVisible(element, false);
const content = element.closest<HTMLIonContentElement>('ion-content') ?? undefined; const content = element.closest<HTMLIonContentElement>('ion-content') ?? undefined;
if (!content) { if (!content) {
// Content to scroll, not found. // Content to scroll, not found.
return false; return false;
} }
@ -449,9 +449,10 @@ export class CoreDom {
* Wait an element to be in dom and visible. * Wait an element to be in dom and visible.
* *
* @param element Element to wait. * @param element Element to wait.
* @param checkSize Wether to check size to check for visibility.
* @return Cancellable promise. * @return Cancellable promise.
*/ */
static waitToBeVisible(element: HTMLElement): CoreCancellablePromise<void> { static waitToBeVisible(element: HTMLElement, checkSize = true): CoreCancellablePromise<void> {
const domPromise = CoreDom.waitToBeInDOM(element); const domPromise = CoreDom.waitToBeInDOM(element);
let interval: number | undefined; let interval: number | undefined;
@ -461,12 +462,12 @@ export class CoreDom {
async (resolve) => { async (resolve) => {
await domPromise; await domPromise;
if (CoreDom.isElementVisible(element)) { if (CoreDom.isElementVisible(element, checkSize)) {
return resolve(); return resolve();
} }
interval = window.setInterval(() => { interval = window.setInterval(() => {
if (!CoreDom.isElementVisible(element)) { if (!CoreDom.isElementVisible(element, checkSize)) {
return; return;
} }