kirbydesign / designsystem

Kirby Design System
https://cookbook.kirby.design
MIT License
83 stars 22 forks source link

[BUG] Continuation of Exception: ResizeObserver loop limit exceeded #2311

Open troelslenda opened 2 years ago

troelslenda commented 2 years ago

Describe the bug

The error still occur in select places of the application.

The view that fails has ChangeDetection onPush, and a DetectChanges is sent whenever the httpRequest that was triggered by PullToRefresh is done. The view that dosen't fail is using a ngrx store with Observable selectors instead.

## Describe how to reproduce the bug 1. Install the application in an emulator. 2. Go to Investment overview 3. Click an Index 4. Pull to refresh 5. The error is in Logcat ## Which Kirby version was used? 5.4.1 ## What was the expected behavior? To not throw the error ## Add any screenshots https://youtu.be/Zestfu9zQT8 ## Please complete the following information: - OS: Android, iOS - Browser: Webview - Browser version: N/A ## Are there any additional context? I've tried adjusting the timeout before triggering scaleHeader in fit directive without luck. The error is not thrown in Safari as previously.
## Checklist: The following tasks should be carried out in sequence in order to follow [the process of contributing](https://github.com/kirbydesign/designsystem/blob/main/.github/CONTRIBUTING.md/#the-process-of-contributing) correctly. ### Verification To make sure the bug is not intended behaviour; it should be verified by a member of team Kirby before moving on to implementation. - [ ] Make sure the `NOT verified` label has been removed by a member of [team Kirby](https://github.com/kirbydesign/designsystem/blob/main/.github/SUPPORT.md#team-kirby); do not proceed until this is done ### Implementation The contributor who wants to implement this issue should: - [ ] Make sure you have read: "[Before you get coding](https://github.com/kirbydesign/designsystem/blob/main/.github/CONTRIBUTING.md/#before-you-get-coding)". - [ ] Signal to others you are working on the issue by assigning yourself. - [ ] Create a branch from the [develop branch](https://github.com/kirbydesign/designsystem/tree/develop) following our [branch naming convention](https://github.com/kirbydesign/designsystem/wiki/The-Good%3A-Branch). - [ ] Create a test that reproduces the bug following guidelines in: "[The good: Test](https://github.com/kirbydesign/designsystem/wiki/The-Good%3A-Test)". - [ ] Write code to fix the bug ### Review Once the issue has been implemented and is ready for review: - [ ] Do a [self-review](https://github.com/kirbydesign/designsystem/wiki/The-Good%3A-Self-review). - [ ] Create a pull-request.
RasmusKjeldgaard commented 2 years ago

2031 has quite a lot of info about the first attempt at solving this, for reference.

RasmusKjeldgaard commented 2 years ago

@troelslenda can you provide a minimal example that reproduces this error outside of your own application? Otherwise it is not easy to understand why this error happens or if it is an issue on our end at all.

RasmusKjeldgaard commented 2 years ago

A workaround has been found in the target application, so this is very rarely thrown (and still has no effect on the user experience, its only an error logging thing).

It should still be fixed, but is hard to reproduce in a small example and a fix seems to have a small impact.

seyfer commented 2 years ago

@troelslenda @RasmusKjeldgaard hey, wdyt about this solution? just would like to know your opinion

if this added to factory

new ResizeObserver(entries => {
   // We wrap it in requestAnimationFrame to avoid this error - ResizeObserver loop limit exceeded
   window.requestAnimationFrame(() => {
     if (!Array.isArray(entries) || !entries.length) {
       return;
     }
     callback(entries);
   });
});